自动化测试（四）05-js测试框架Jest——Jest在React、Vue项目中的应用

自动化测试（四）05-js测试框架Jest——Jest在React、Vue项目中的应用

在create-react-app中的应用：

安装对应的依赖：

npm install react-test-renderer enzyme enzyme-adapter-react-16 

Enzyme是一个非常棒的React组件测试测试库。

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components’ output. You can also manipulate, traverse, and in some ways simulate runtime given the output.

Enzyme’s API is meant to be intuitive and flexible by mimicking jQuery’s API for DOM manipulation and traversal

需要注意的两点是：

• 需要配置Adapter，不同的React的Adapter不同

Enzyme Adapter Package	React semver compatibility
enzyme-adapter-react-16	^16.4.0-0
enzyme-adapter-react-16.3	~16.3.0-0
enzyme-adapter-react-16.2	~16.2
enzyme-adapter-react-16.1	~16.0.0-0 || ~16.1
enzyme-adapter-react-15	^15.5.0
enzyme-adapter-react-15.4	15.0.0-0 - 15.4.x
enzyme-adapter-react-14	^0.14.0
enzyme-adapter-react-13	^0.13.0

• 需要初始化配置setUpTests.js

  官方文档在Package.json中设置jest配置，已经过时，Jest框架最新会默认加载文件src/setUpTests.js

• import { configure } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16'
  
  configure({ adapter: new Adapter() })
  

在vue工程化项目中：

"devDependencies": {
  "@vue/cli-plugin-unit-jest": "^3.9.0",
  "@vue/test-utils": "1.0.0-beta.29",
  "babel-core": "7.0.0-bridge.0",
  "babel-eslint": "^10.0.1",
  "babel-jest": "^23.6.0",
  "babel-preset-env": "^1.7.0",
},

添加如上依赖，

配置scripts:

"scripts": {
  "test": "vue-cli-service test:unit"
},

配置jest.config.js

module.exports = {
  // 处理vue结尾的文件
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue'
  ],
  // es6转义
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  transformIgnorePatterns: [
    '/node_modules/'
  ],
  // cli配置了webpack别名
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/',
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname'
  ]
}