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
然后安装依赖，就可以跑了， 然后单元测试文字指向自己项目就好了。
--END--
相关链接：
https://jestjs.io
https://github.com/vuejs/vue-test-utils-jest-example
更多：
面试去了， 有时间就写更多关于测试的。和nodejs的。
