使用jest来测试你的Vue程序

Author Avatar
流水 7月 20, 2017

使用jest来测试你的Vue程序

安装

  1. 全局安装jest

    1
    npm install jest -g

  2. 使用Babel

1
npm install --save-dev babel-jest
  1. 使用typescript来编写和测试
1
npm install --save-dev ts-jest @types/jest
  1. 配置package.json文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    {
      // 这里只有jest部分
        "jest": {
          "moduleNameMapper": {
            "^@(.*)$": "<rootDir>/src$1"
          },
          "transform": {
            "^.+\\.js$": "babel-jest",
            ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor",
            ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
          },
          "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
          "moduleFileExtensions": [
            "js",
            "vue",
            "ts",
            "tsx"
          ]
        }
      //...
    }

使用

测试函数

1
2
3
4
// sum.js
export function sum (a, b) {
  return a + b
}

我们来编写一个测试文件进行测试

1
2
3
4
5
// sum.test.js
import {sum} from './sum'
test('测试1+2是不是等于3', () => {
  expect(sum(1, 2)).toBe(3)
})

组件的测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <div id="app">
    <div class="lorem-class">some test text</div>
    <button v-on:click="clickHandler('value passed to clickHandler')">Click Me!</button>
  </div>
</template>
<script>
  export default {
    name: 'app',
    data () {
      return {
        msg: 'hello world'
      }
    },
    methods: {
      clickHandler(input) {
        return input + 1;
      }
    }
  }
</script>
<style>
  body {
    color: red;
  }
</style>

对组件属性及渲染做测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Vue from 'vue'
import Hello from './Hello.vue'
const doTest = (Component) => {
  const vm = new Vue({
    el: document.createElement('div'),
    render: h => h(Component)
  })
  const mockFn = jest.fn();
  vm.$children[0].clickHandler = mockFn;
  // check if template HTML compiled properly
  expect(vm.$el).toBeDefined();
  expect(vm.$el.querySelector('.lorem-class').textContent).toEqual('some test text');
  expect(vm.$children[0].msg).toEqual('hello world')
  // check if template calls vue methods
  vm.$el.querySelector('button').click();
  expect(mockFn.mock.calls[0][0]).toBe('value passed to clickHandler')
}
describe('preprocessor', () => {
  it('should process a `.vue` file', () => {
    doTest(Hello);
  })
})