jest--搭建前端测试环境

cassiehuang commented 3 years ago

依赖的插件

jest jest-serializer-vue vue-jest babel-jest @vue/test-utils babel-plugin-transform-es2015-modules-commonjs

配置babel

使用babel-presets预设es版本，将其转为目的语法树，再转为target下可执行的代码如果包括浏览器，则targets: {brower: ''}

"test": {
      "presets": [
        ["env", {
          "modules": false,
          "targets": {
            "node": "current"
          }
        }]
      ],
      "plugins":["transform-es2015-modules-commonjs"]
    }

配置script

"jest": "set NODE_ENV=test&&jest --coverage"

配置eslint

env: {
  jest: true
}

根目录下创建jest.config.js，配置项为

module.exports = {
  testEnvironment: 'node',
  testMatch: [
    '**/test/**/*.[jt]s?(x)',
    '**/?(*.)+(spec|test).[tj]s?(x)'
  ]
}

cassiehuang commented 3 years ago

js测试用例

import {
  validateURL
} from '../src/utils/validate.js'
test('https://xyb.citicbank.com is valid uri', () => {
  expect(validateURL('https://xyb.citicbank.com')).toBe(true)
})

cassiehuang commented 3 years ago

vue文件测试用例

cassiehuang commented 3 years ago

遇到的问题

babel-polyfill

开发时写的代码经过webpack编译，已经使用了babel-polyfill，写测试用例时需要引入babel-polyfill babel-polyfill和babel-presets不同，preset处理已经存在的语法间转换，polyfill引入新语法，如扩展运算符，promise等

图片引入

开发时图片引入使用url-loader处理，在jest中使用时会报错，需要进行处理

cassiehuang / study