npm run unit
可以在后面加上-- --watch启动监听模式
别名配置
使用别名在Vue中很常见，可以让我们避免使用复杂、易错的相对路径：
import Page from '@/components/Test5/Test5'
上面的@就是别名，在使用Vue-cli搭建的项目中，默认已经在webpack.base.conf.js中对@进行了配置：
module.exports = {
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.join(__dirname, '..', 'src')
}
},
}
同样，使用Jest时也需要在Jest的配置文件jest.conf.js中进行配置
"jest": {
"moduleNameMapper": {
'^@/(.*)$': "<rootDir>/src/$1",
},
...
Shallow Rendering
创建一个App.vue：
<template>
<div id="app">
<Page :messages="messages"></Page>
</div>
</template>
<script>
import Page from '@/components/Test1'
export default {
name: 'App',
data() {
return {
messages: ['Hello Jest', 'Hello Vue']
}
},
components: {
Page
}
}
</script>
然后创建一个Test1组件
<template>
<div>
<p v-for="message in messages" :key="message">{{message}}</p>
</div>
</template>
<script>
export default {
props: ['messages'],
data() {
return {}
}
}
</script>
针对App.vue编写单元测试文件App.spec.js
// 从测试实用工具集中导入 `mount()` 方法
import { mount } from 'vue-test-utils';
// 导入你要测试的组件
import App from '@/App';
describe('App.test.js', () => {
let wrapper,
vm;
beforeEach(() => {
wrapper = mount(App);
vm = wrapper.vm;
wrapper.setProps({ messages: ['Cat'] })
});
it('equals messages to ["Cat"]', () => {
expect(vm.messages).toEqual(['Cat'])
});
// 为App的单元测试增加快照（snapshot）：
it('has the expected html structure', () => {
expect(vm.$el).toMatchSnapshot()
})
});
执行单元测试后，测试通过，然后Jest会在test/__snapshots__/文件夹下创建一个快照文件App.spec.js.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP exports[`App.test.js has the expected html structure 1`] = ` <div id="app" > <div> <p> Cat </p> </div> </div> `;
通过快照我们可以发现，子组件Test1被渲染到App中了。
这里面有一个问题：单元测试应该以独立的单位进行。