【Jest】Jest单元测试环境搭建

# 安装Jest和其他依赖
npm install --save-dev jest babel-jest babel-core regenerator-runtime enzyme enzyme-adapter-react-16 react-test-renderer
 
# 安装react和react-dom，如果还没有安装的话
npm install --save react react-dom
 
# 创建或更新package.json中的scripts部分
"scripts": {
  "test": "jest"
}
 
# 创建Jest配置文件（如果还没有的话）
touch jest.config.js
 
# 编辑jest.config.js，添加以下内容
module.exports = {
  verbose: true,
  moduleFileExtensions: ['js', 'jsx'],
  moduleNameMapper: {
    '\\.(css|less)$': 'identity-obj-proxy',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
  },
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
  },
  testPathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|.next)\\\\]'],
  setupFilesAfterEnv: ['<rootDir>/__mocks__/react-env.js'],
  setupTestFrameworkScriptFile: '<rootDir>/__mocks__/enzyme-env.js',
};
 
# 安装identity-obj-proxy，用于处理CSS文件
npm install --save-dev identity-obj-proxy
 
# 创建文件模拟（如果还没有的话）
touch __mocks__/fileMock.js
 
# 编辑fileMock.js，添加以下内容
module.exports = 'test-file-stub';
 
# 创建React环境模拟文件
touch __mocks__/react-env.js
 
# 编辑react-env.js，添加以下内容
global.React = require('react');
global.ReactDOM = require('react-dom');
 
# 创建Enzyme环境模拟文件
touch __mocks__/enzyme-env.js
 
# 编辑enzyme-env.js，添加以下内容
const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
 
Enzyme.configure({ adapter: new Adapter() });

以上脚本和配置文件将帮助你设置Jest测试环境，包括安装所需的依赖、配置Jest以及创建模拟文件，以便于你可以开始编写和运行React组件的测试。