Taro@3+版本中集成jest+enzyme自动化测试

1. 需要安装的插件

yarn add --dev @types/jest

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

yarn add --dev babel-jest

yarn add --dev enzyme

yarn add --dev @types/enzyme

yarn add --dev jest

yarn add --dev ts-jest

yarn add --dev @types/jsdom

2. 在项目顶层目录最顶层创建 tests 文件，在tests文件夹中创建 setupTests.js 和 style-mock.js 文件

setupTests.js

import { configure } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

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

style-mock.js

module.exports = {
  process() {
    return ''
  }
}

3. 在项目顶层目录创建 jest.config.js 文件

jest.config.js

module.exports = {
  verbose: true,
  moduleNameMapper: {
    '@tarojs/components': '@tarojs/components/dist-h5/react',
    '^.+\\.(css|scss|less)$': '<rootDir>/tests/style-mock.js',
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
    '^.+\\.esm.js?$': 'ts-jest',
  },
  rootDir: __dirname,
  setupFiles: ['<rootDir>/tests/setupTests'],
  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json'],
  transformIgnorePatterns: ['<rootDir>/node_modules/(?!@taro)', '^.+\\.(css|sass|scss|less)$'],
};

4. 整个测试准备工作完成，写一段测试代码感受一下

import React from 'react';
import About from '../../index';
import {shallow} from 'enzyme';

jest.mock('@tarojs/taro', () => ({
  request: () => new Promise((resolve) => resolve({data: {Website: 'fake response'}})),
  getEnv: () => 'env',
  getAccountInfoSync: () => {
    return {
      miniProgram: {
        envVersion: 'develop'
      }
    }
  },
  pxTransform: (size) => `{size}px`,
}))

describe('About Component', () => {
  test('About 渲染样式正常', () => {
    const wrapper = shallow(<About />);
    expect(wrapper).toMatchSnapshot();
  });
})

整个测试完美通过