5.vwe开发之测试

vwe开发之测试

代码测试有如下选择

1. Jest
2. Mocha
3. Karma

处理Node,Express和React的时候，Jest一般来说更少问题，所以我们选择Jest

1. 安装Jest

npm install --save-dev jest

2. 在根目录下生成目录__mocks__在里面生成两个文件fileMock.js 和 styleMock.js。我们
   将利用他们进行大文件和styles测试，因为一般来说，如果只是为了单元测试这些是没有必要的。

src
dist
__mocks__
    fileMock.js
    styleMock.js

fileMock.js代码如下：

module.exports = 'test-file-stub';

styleMock.js代码如下：

module.exports = {};

3. 更新package.json脚本代码如下：

"scripts": {
  "test": "jest",
  "coverage": "jest --coverage",
  "buildDev": "rm -rf dist && webpack --mode development --config webpack.server.config.js && webpack --mode development --config webpack.dev.config.js",
  "buildProd": "rm -rf dist && webpack --mode production --config webpack.server.config.js && webpack --mode production --config webpack.prod.config.js",
  "start": "node ./dist/server.js"
},
"jest": {
  "moduleNameMapper": {
    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
    "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
  }
},

注意：
如果是windows下请将buildDev和buildProd修改成对应的dos脚本

  "scripts": {
    "test": "jest",
    "coverage": "jest --coverage",
    "buildDev": "DEL /F /Q dist  & webpack --mode development --config webpack.server.config.js & webpack --mode development --config webpack.dev.config.js",
    "buildProd": "DEL /F /Q dist & webpack --mode production --config webpack.server.config.js & webpack --mode production --config webpack.prod.config.js ",
    "start": "node ./dist/server.js"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
    }
  },

让我们创建一个简单的可测试文件，新建一个文件./src/js/adder.js，并且一个测试新目录
./src/js/test/adder.test.js。

adder.js 代码如下：

const adder = (x, y) => x + y
export default adder

adder.test.js 代码如下：

import adder from '../adder'
describe('Adder', () => {
  test('adds two numbers', () => {
    expect(adder(5, 3)).toEqual(8)
  })
})

现在可以运行 npm test测试应该会通过，并且你可以运行npm run coverage去获取一个覆盖率报告。

那么代码测试完成了！
git项目

下一篇：6.vwe开发之引入vue