Sticky Note | 在 vite & react 中 配置 jest & enzyme 单测

环境

截取一些 本文介绍的配置 具体的配置参考 github.com/YepGym/reac…

项目相关
"vite": "^2.8.0"
"react": "^17.0.2",

ts相关
"typescript": "^4.5.4",
"@types/enzyme": "^3.10.11",
"@types/jest": "^27.4.1",
"@types/react": "^17.0.33",
"ts-node": "^10.7.0",

babel相关
"@babel/core": "^7.17.7",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"babel-jest": "^27.5.1",

jest & enzyme相关
"enzyme": "^3.11.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.5.1",
"jest-enzyme": "^7.1.2",

测试代码

最后我们需要测试的组件如下

interface IProps {
  title: string;
}

export default ({ title }: IProps) => <h1>{title}</h1>;

单测文件如下

import { shallow } from 'enzyme';
import Title from '../index';


describe('Title components', () => {
  it('basic', () => {
    const wrapper = shallow(<Title title="jest && enzyme" />);
    expect(wrapper).toMatchSnapshot();
    wrapper.unmount();
  });
});

Jest 配置

1. 安装 jest

yarn add jest @types/jest -D

2. 生成 jest 配置文件

npx jest --init

3. 配置 babel

yarn add babel-jest @babel/core @babel/preset-env -D

在项目的根目录下创建 babel.config.js  内容如下

module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

4. 配置 ts

yarn add  @babel/preset-typescript ts-node -D

修改我们刚刚创建的 babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

5. 配置 react

同样需要借助 babel

yarn add @babel/preset-react -D

修改 babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-typescript',
    [
      '@babel/preset-react',
      {
        runtime: 'automatic',
      },
    ],
  ],
};

enzyme 配置

1. 安装 enzyme

yarn add enzyme @types/enzyme -D

2. 安装适配器

enzyme 官方有相应的适配器对React的支持 但是只支持到16版本

17版本 由第三方社区提供支持

www.npmjs.com/package/enz…

www.npmjs.com/package/@wo…

yarn add enzyme-adapter-react-16 -D

or

yarn add @wojtekmaj/enzyme-adapter-react-17 -D

3. 配置适配器

我们还需要用到 jest-enzyme 这个模块来建立 两者之间的联系

yarn add jest-enzyme -D

在根目录新建 jest.setup.ts 内容如下

// 导入 jest-enzyme 手动建立 enzyme 与 jest 的连接
import 'jest-enzyme';

// 启动 enzyme 并添加对应 react 版本的适配器
import { configure } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

configure({ adapter: new Adapter() });

打开 jest 生成的配置文件 jest.config.ts

配置上下面这一行

setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],

<rootDir> 是项目的根目录

setupFilesAfterEnv 后配置的文件会在每次启动运行 jest 前被运行

因为 enzyme 适配器提供了对 React 的支持 是必须的环境

所以每次启动 jest 都需要运行在适配器的环境下 因此需要这项配置

yarn test

配置完成后 运行 yarn test 就可以看到

大功告成 😎

补充

1. 支持 css 样式文件

如果在组件引入了 css 文件 未采取任何的配置下 会得到如下报错

解决方法

yarn add identity-obj-proxy -D

在 jest.config.ts 中加入 如下配置

moduleNameMapper: {
  '\\.(css|less)$': 'identity-obj-proxy',
},

2. 一些第三方模块的报错

例如我在使用了第三方库 react-markdown 后 单测报错

这边我使用了好多方法后 最终在 jest.config.ts 中加入了如下配置

transformIgnorePatterns: ['/node_modules/?!(react-markdown)'],