在 Node.js 中用 Jasmine 测试 React 应用

Jasmine NPM 软件包最初仅设计用于对 Node.js 代码运行规范，但可以通过其他几个软件包将其用于运行 React 规范。本教程假设你正在使用 babel 编译代码，并使用了 React Testing Library 进行测试。我们还将使用 jsdom 为规范提供一个伪 HTML DOM。

还可以获得此设置的完整工作示例。

选择将要使用的包管理工具

npm（create-react-app 的默认值）
yarn

基本设置

如果尚未安装，请安装以下软件包

$ yarn add --dev @babel/core \
                 @babel/register \
                 babel-preset-react-app \
                 cross-env \
                 jsdom \
                 jasmine

$ npm install --save-dev @babel/core \
                         @babel/register \
                         babel-preset-react-app \
                         cross-env \
                         jsdom \
                         jasmine

然后初始化 Jasmine

$ yarn run jasmine init

$ npx jasmine init

该命令将创建 spec/support/jasmine.json 并使用初始默认配置填充它。使用 Jasmine 初始化后，第一件事是创建一个帮助器，将 babel 注册到 require 链中。这将导致 TypeScript 文件在加载时被动态编译为 JavaScript。在 spec/helpers 目录中创建一个名为 babel.js 的新文件

require('@babel/register');

或者，如果使用 TypeScript

require('@babel/register')({
    "extensions": [".js", ".jsx", ".ts", ".tsx"]
});

我们需要通过添加 Babel 配置来告诉 Babel 我们想要使用哪种 JavaScript，内容如下

{
  "presets": ["react-app"]
}

接下来，我们需要提供一个模拟的浏览器环境。使用以下内容在 spec/helpers 中创建 jsdom.js

import {JSDOM} from 'jsdom';

const dom = new JSDOM('<html><body></body></html>');
global.document = dom.window.document;
global.window = dom.window;
global.navigator = dom.window.navigator;

为了确保在运行任何规范之前加载这些文件，我们将编辑 spec/support/jasmine.json。我们需要在任何包含 TypeScript、JSX 或任何需要转译的代码的帮助程序之前加载 Babel 帮助程序，因此我们修改 jasmine.json，如下所示

"helpers": [
  "helpers/babel.js",
  "helpers/**/*.js"
],

或者，如果使用 Typescript

"helpers": [
  "helpers/babel.js",
  "helpers/**/*.{js,ts}"
],

接下来，设置 package.json 中的 test 脚本以运行 Jasmine

  "scripts": {
    "test": "cross-env NODE_ENV=test jasmine",

处理 CSS 和图像导入

React 代码导入 CSS 或图像文件是很常见的。通常在构建时会解决这些导入，但在 Node 中运行规范时会产生错误。为了解决此问题，我们添加另一个软件包

$ yarn add --dev ignore-styles

$ npm install --save-dev ignore-styles

并将以下代码放入 spec/helpers/exclude.js 中。

import 'ignore-styles';

可选：规范文件模式配置

你可能还需要更改 Jasmine 查找规范文件的方式。Jasmine 通常在以 .spec.js 结尾的名称结尾的 spec 目录中查找文件，但在 React 项目中，常见做法是将规范文件放在与它们测试的代码相同的目录中，并使用以 .test.js 结尾的名称来命名它们。如果你希望遵循该约定，请相应更改 spec/support/jasmine.json 中的 spec_dir、spec_files 和 helpers 设置

  "spec_dir": "src",
  "spec_files": [
    "**/*.test.*"
  ],
  "helpers": [
    "../spec/helpers/babel.js",
    "../spec/helpers/**/*.js"
  ],

或者，对于 TypeScript

  "spec_dir": "src",
  "spec_files": [
    "**/*.test.*"
  ],
  "helpers": [
    "../spec/helpers/babel.js",
    "../spec/helpers/**/*.{js,ts}"
  ],

设置 React 测试实用程序

我们需要一种呈现 React 组件和检查结果的方法。有几个提供该功能的实用程序库。最受欢迎的是 React Testing Library。

react-testing-library 的设置非常简单。我们需要做的就是确保安装了 @testing-library/react 软件包。如果你使用较新版本的 create-react-app 来初始化你的应用程序，那么它可能已经存在。如果没有，请安装它

$ yarn add --dev @testing-library/react

$ npm install --save-dev @testing-library/react

请参阅 React Testing Library 文档了解更多信息。相关的 jasmine-dom 匹配器库也可能很有用。

请注意，大部分 React Testing Library 文档都是为 Jest 编写的，因此在 Jasmine 中使用之前，代码示例需要进行一些翻译。尤其是

test() 的 Jasmine 等价项是 it()。
尽管重叠部分较多，但 Jest 和 Jasmine 具有不同的内置匹配器。
Jest 在每个文件中创建了一个隐式顶级套件。Jasmine 没有，因此强烈建议将每个文件的内容包装在一个命名良好的 describe 中。

在将代码示例从 Jest 翻译到 Jasmine 时，你可能会发现参考 Jasmine 教程、Jasmine 附带的匹配器列表和 jasmine-dom 附带的匹配器列表很有用。

总结

你已经准备好了。编写你的规范并运行它们

$ yarn test

$ npm test