icejs 运行单元测试命令的正确姿势

[aspirantzhang]

前提

想用 JEST，import React from 'react' 必须写。我也不知道为啥，即使打开了 jsx-runtime，也要写，否则 jest 就报错给你看。

指定文件的单元测试

由于 umijs 里做了封装，所以运行指定文件的单元测试，如果测试文件名为 MyName.test.tsx 只需要：

yarn test MyName

而 icejs 中，首先 jest 需要单独安装，另外文件名位置需要完整一点，文件后缀不可缺少：

yarn test **/MyName.test.tsx

组件 快照测试

对于快照测试，正常来讲就两步走：

一是安装 react-test-renderer 这个包，然后代码就是：

const dom = renderer.create(<BasicList />).toJSON();
expect(dom).toMatchSnapshot();

但其中要注意：我目前安装的 icejs 版本是 v2.6.4，它的 dependencies 中 React 的版本是 17.0.2，而如果直接 yarn add react-test-renderer -D 的话，它按的似乎是最新版 18.x。在后续使用中会出现问题，所以安装时使用：

yarn add [email protected] -D

或手动修改版本号再重装依赖。

另外，我在 Win10 下使用 jest 来做快照测试时，jest 报一个路径的错误。随后我转用 Docker，在 Debian 容器中开发，Linux 下不报错。

使用 useRequest 的组件 快照测试

如果组件内使用了 useRequest，则 jest 要配置为 js-dom 模式才能进行快照测试。两种方法处理：

1. 在根目录创建 jest.config.js ,在其中写入：

    module.exports = {
      testEnvironment: 'jsdom',
    };

2. 在 package.json 中，写一个 jest 项，把上面的 testEnvironment 写入。

使用 react-testing-library

直接安装使用 react-testing-library，使用时报：

Could not locate module react-dom/client mapped as: /usr/src/app/node_modules/react-dom/$1.

依然是版本问题，默认安装是 13.x，降为 12.0.4

yarn add @testing-library/[email protected] -D

更新快照的命令

更新快照不是简单的加 -u，命令需要这么写：

yarn test --jest--updateSnapshot

我尝试过：

npm test -- -u
yarn test -u
yarn test -- --jest-u

等等各种写法，都不好使。

当然，后面这一长串有点难打，所以写了一个 script 命令到 package.json 里：

"test-update": "icejs test --jest--updateSnapshot",

[awen1988]

期待大佬多出点教程，这个东西感觉学习资料是相当稀少，不知道为啥