Jest 配置

1、Jest 安装

pnpm add -D jest

初始化 Jest 配置文件

pnpm jest --init

2、Jest支持ESM

安装完 Jest 后，在 Jest 的测试文件中使用 import 会抛异常。

测试文件中的代码：

import sum from './sum';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

报错信息：

问题原因是 nodejs 环境下默认是不支持 ESM。

解决方案：

1、配置 Nodejs 支持ESM

在 package.json 内增加 type 配置，并把 jest 的执行语句替换为 "NODE_OPTIONS=--experimental-vm-modules jest"，如下：

// package.json
{
  ...,
  "type": "module",
  "scripts": {
    "test": "NODE_OPTIONS=--experimental-vm-modules jest"
  }
}

2、使用 Babel 转码

安装 babel 相关依赖

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

配置 babel.config.js

// babel.config.js

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

以上的办法只能解决 .js 中使用 import 的情况，对 .ts 无效，要支持 .ts 中也能使用 import，则需要在 jest.config.js 文件中添加如下配置：

// jest.config.js
const config = {
  ...,
  extensionsToTreatAsEsm: ['.ts']
}

3、Jest支持React 

1、安装依赖

pnpm i @babel/preset-react @testing-library/jest-dom @testing-library/react jest-environment-jsdom --save-dev

@babel/preset-react： 该插件将 JSX 转换为 JavaScript，从而使 Jest 能够正确解析和测试 JSX

@testing-library/jest-dom： 该插件拓展了一些jest匹配器，可以使测试用例更具声明性且更易于阅读和维护

@testing-library/react： 用于测试React组件的库

jest-environment-jsdom： jsdom是一个类似浏览器的环境，Jest 28及以上版本不再内置jsdom插件，需要单独安装

2、配置babel

修改 babel.config.js

export default {
    presets: [
      ['@babel/preset-react']
    ]
};

3、修改Jest配置

const config = {
    collectCoverage: true,
    testEnvironment: 'jsdom',
    extensionsToTreatAsEsm: ['.ts', '.jsx'],
    collectCoverageFrom: [
        '**src/**/*.{js,ts,jsx}',
        '!**/node_modules/**',
        '!**/vendor/**',
    ],
};
  
export default config;

4、测试代码

4.1、组件代码

// App.jsx
import React from 'react';

const App = () => {
    return (<div>Hello world</div>);
};

export default App;

4.2、测试代码

// app.test.js
import React from 'react';
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import App from './App';

test('renders the correct text', () => {
    const { getByText } = render(<App />);
    const textElement = getByText(/Hello world/i);
    expect(textElement).toBeInTheDocument();
})