jest单元测试配置

有人说直接用cli的不久好了，配置个鬼哦。（如果项目已经写好了，这时候怎么搞？）

ready go

官方推荐Vue Test Utils, 可以用jest， mocha等， 我选择了jest， 配置也比较简单。

比较值得注意的是，官方推荐再同一个项目里面，新建一个test文件，在里面写单元测试，然后调用src(@)的组件，这时候的话，我不是很推荐这个做法，1：项目环境问题 2：单独的话更加灵活。 不过jest本身做的很好了，基本零配置，所以分开就一个目录的问题而已。

在文件的项目根目录新建一个test， 里面放单元测试环境

cd到test， 然后安装几个依赖， 不一一介绍，先跑起来

先新建个package.json

{
  "name": "名字",
  "description": "详情",
  "version": "1.0.0",
  "author": "Evan You <yyx@gmail.com>",
  "private": true,
  "scripts": {
    "test": "jest"
  },
  "dependencies": {
    "vue": "^2.4.4"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue"
    ]
  }
}

npm install --save-dev jest @vue/test-utils babel-preset-env babel-jest jest jest-serializer-vue vue-jest

然后新建.babelrc文件， vi .babelrc

{
  "presets": [["env", { "modules": false }]],
  "env": {
    "test": {
      "presets": [["env", { "targets": { "node": "current" } }]]
    }
  }
}

如果需要别名解析请按这个格式：

{
  // ...
  "jest": {
    // ...
    // 支持源代码中相同的 `@` -> `src` 别名
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    }
  }
}

ok， 环境好了， 这时候写单元测试跟快照

快照用法

test('renders correctly', () => {
  const wrapper = mount(Component)
  expect(wrapper.element).toMatchSnapshot()
})

试试利器，我们写个测试内容吧。

在test目录下新建一个文档， 名字取 *.spec.js 或者 test.js 都会被识别，如果项目已经有test.js请把文件改下名字，或许修改配置。

然后写入如下内容（从官方例子copy的）

import { shallowMount } from '@vue/test-utils'
import Message from '../src/components/Message.vue'

describe('Message', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(Message, {
      propsData: { msg }
    })
    expect(wrapper.text()).toBe(msg)
  })

  it('renders default message if not passed a prop', () => {
    const defaultMessage = 'default message'
    const wrapper = shallowMount(Message)
    expect(wrapper.text()).toBe(defaultMessage)
  })
})

Message.vue的内容如下

<template>
  <h1> {{ msg || 'default message' }}</h1>
</template>

<script>
export default {
  name: 'message',
  props: [
    'msg'
  ]
}
</script>

npm test运行查看单元测试内容吧。

如果出问题了， 等其他情况， 就git clone https://github.com/vuejs/vue-test-utils-jest-example/blob/master/src/components/Message.vue
然后安装依赖，就可以跑了， 然后单元测试文字指向自己项目就好了。

官方文档：
https://vue-test-utils.vuejs.org/zh/guides/#%E7%94%A8-jest-%E6%B5%8B%E8%AF%95%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6

–END–

相关链接：
https://jestjs.io
https://github.com/vuejs/vue-test-utils-jest-example

更多：

面试去了， 有时间就写更多关于测试的。和nodejs的。