角+开玩笑
学习如何使用Jest为Angular编写单元测试。
下载
在这篇文章中，我将引用一个使用Jest的演示应用程序中的代码。您可以克隆存储库或下载源代码的zip文件:
角6
我们将使用Angular 6。然而，这里演示的大部分内容应该都适用于Angular 2+。
我们将不使用茉莉或业力。虽然我们没有使用Jasmine，但我们将了解到Jest与Jasmine类似，遵循许多相同的模式，使用许多相同的函数来构建测试套件、测试和断言值以及预期结果。
因此，你可以从生成的Angular应用中删除以下文件:
- src / karma.config.js
- src / test.ts
中还可以删除以下开发依赖项package.json:
- jasmine-core
- jasmine-spec-reporter
- 业力
- karma-chrome-launcher
- karma-coverage-istanbul-reporter
- karma-jasmine
- karma-jasmine-html-reporter
为什么开玩笑?
简单。这是太快了。
的jest测试运行器使用jsdom并并行执行测试。合在一起，这就成了笑话a真的快速测试运行器。
安装开玩笑
使用npm将jest和jest预置的angular模块安装到你的项目中:
美元npm我-D jest jest-preset-angular或者,与纱:
美元纱添加- d jest jest-preset-angular的jest-preset-angular模块为Angular提供了Jest的预设配置。在安装之后，我们需要做一些事情。
配置
安装了Jest和Jest -preset- Angular之后，让我们为Angular 6项目配置Jest。首先,创建一个jest.config.js在你的项目的根目录下:
模块。出口={预设:“jest-preset-angular”,根:(“src”],setupTestFrameworkScriptFile:“< rootDir > / src / setup-jest.ts”}在我们的配置:
- 首先，我们使用先前安装的预置基本配置。
- 接下来，我们指示Jest在src目录中。
- 最后，我们使用src / setup-jest.ts将在每次测试前执行的模块。
然后,创建src / setup-jest.ts:
进口“jest-preset-angular”;进口”。/ jestGlobalMocks ';在这个模块中，我们导入预置模块和src / jestGlobalMocks.ts文件，我们将在其中定义任何必要的浏览器模拟。你可以下载jestGlobalMocks。ts文件来自jest-preset-angular的示例应用。
测试脚本
控件中的测试脚本是更新的最后一步package.json文件:
{“脚本”:{“测试”:“开玩笑”,“测试:观察”:“笑话,看”,“测试:ci”:“开玩笑——runInBand”,“测试:报道”:“笑话,报道”,}}路径映射
如果你正在使用路径映射来导入项目中的模块tsconfig.json文件之后，您将需要向src / setup-jest.ts文件(下图)。
例如，您可以将路径映射配置在tsconfig.json如:
{“compilerOptions”:{baseUrl:“。/”,“路径”:{“@core / *”:(“src / app /核心/ *”],“@state / *”:(“src / app /状态/ *”],}}}这允许在Angular项目中缩短命名空间的导入。例如:
进口{用户}从'../../../../ 州/用户/ user.model”;可以使用以下import语句:
进口{用户}从“@state / user / user.model”;为了指示Jest关于路径映射，您必须指定moduleNameMapper配置的src / setup-jest.ts文件来匹配:
模块。出口={预设:“jest-preset-angular”,setupTestFrameworkScriptFile:' < rootDir > / src / setup-jest.ts”,moduleNameMapper:{“@core /(. *)”:' < rootDir > / src / app /核心/ $ 1 ',“@state /(. *)”:' < rootDir > / src / app /状态/ $ 1 '}};茉莉花diff
如上所述，Jest使用的API与Jasmine非常相似。如果您发现您的测试没有使用Jest运行，请尝试使用jest-codemods将代码迁移到Jest。
为了制造间谍，我们用jest.fn ()模拟功能。例如，在Jasmine中，可以使用createSpyObj ()方法:
茉莉花。createSpyObj(“名字”,(“关键”])在Jest中，我们简单地创建一个mock:
开玩笑。fn({关键:开玩笑。fn()})运行测试
安装和配置Jest后，通过以下方式运行测试:
美元npm测试
在VS Code中调试
如果你使用VS Code，你可以很容易地配置调试器来运行你的Jest测试。这对于使用断点调试测试很有帮助。
在VS Code中，打开调试视图，然后点击齿轮图标。这将打开.vscode / launch.json文件。
新增如下配置:
{“配置”:({“类型”:“节点”,“请求”:“启动”,“名称”:“笑话测试”,“程序”:" $ {workspaceFolder} / node_modules /笑话/ bin /笑话”,“参数”:(”——runInBand”],“控制台”:“integratedTerminal”,“internalConsoleOptions”:“neverOpen”}]}选择新创建的“Jest Test”配置，设置任何必要的断点，然后单击Start Debugging (play图标)。
结论
我喜欢Karma，如果你今天没有为你的Angular应用编写任何单元测试，那就从这里开始吧;yobet外围开始编写单元测试，努力实现TDD的幸福。
虽然在使用CLI创建新的Angular应用程序时，Karma是默认的测试运行器，但你可以很容易地用Jest将其替换掉。