布莱恩F爱
向一位来自波特兰的专注于Ayobet英雄联盟ngular、Web技术和Node.js的谷歌开发专家学习。
广告 ·ultimatecourses.com
用终极课程正确地学习Angular

角+开玩笑

学习如何使用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将其替换掉。

布莱恩F爱

嗨,我是布莱恩。我对TypeScript、Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。