介绍
Jest是一个流行的JavaScript测试框架,为开发人员带来了大量的好处. 如果您完全不熟悉Jest一般的工作方式,我建议您从此开始(https://andsky.com/tech/tutorials/testing-jest-intro).一旦您了解Jest的基本知识,您将准备好跳进并看看它如何用于测试您的Vue应用程序。
设置和安装依赖
如果您的计算机上尚未安装 Vue CLI,请开始运行:
1npm install -g @vue/cli
或者,如果你更喜欢黄金:
1yarn global add @vue/cli
现在你将能够从命令行运行vue命令,让我们创建一个名为alligator-test的Vue应用程序。
1vue create alligator-test
然后,运行以下命令来添加我们的测试依赖(@vue/cli-plugin-unit-jest和 @vue/test-utils):
1npm install @vue/cli-plugin-unit-jest @vue/test-utils
接下来,修改您的项目的 package.json文件,以便在脚本中有一个条目,上面说测试:jest。
然后,创建一个包含以下内容的jest.config.js文件:
1[label jest.config.js]
2module.exports = {
3 preset: '@vue/cli-plugin-unit-jest'
4}
现在,打开您所选择的代码编辑器中的alligator-test目录。
编码一个简单的应用程序
让我们对vue-cli为我们创建的默认文件做一些更改。
删除src/components目录并将App.vue修改为:
1[label App.vue]
2<template>
3 <div id="app">
4 <div>
5 <h3>Let us test your arithmetic.</h3>
6 <p>What is the sum of the two numbers?</p>
7 <div class="inline">
8 <p>{{ x1 }} + {{ x2 }} =</p> <input v-model="guess"> <button v-on:click="check">Check Answer</button>
9 </div>
10 <button v-on:click="refresh">Refresh</button>
11 <p>{{message}}</p>
12 </div>
13 </div>
14</template>
15
16<script>
17export default {
18 name: 'App',
19 data() {
20 return {
21 x1: Math.ceil(Math.random() * 100),
22 x2: Math.ceil(Math.random() * 100),
23 guess: "",
24 message: ""
25 }
26 },
27 methods: {
28 check() {
29 if (this.x1 + this.x2 === parseInt(this.guess)) {
30 this.message = "SUCCESS!"
31 } else {
32 this.message = "TRY AGAIN"
33 }
34 },
35 refresh() {
36 this.x1 = Math.ceil(Math.random() * 100);
37 this.x2 = Math.ceil(Math.random() * 100);
38 }
39 }
40}
41</script>
42
43<style>
44#app {
45 font-family: Avenir, Helvetica, Arial, sans-serif;
46 -webkit-font-smoothing: antialiased;
47 -moz-osx-font-smoothing: grayscale;
48 text-align: center;
49 color: #2c3e50;
50 margin-top: 60px;
51}
52.inline * {
53 display: inline-block;
54}
55img {
56 height: 350px;
57}
58</style>
看看代码,看看你是否可以弄清楚应用程序做什么。
然后继续运行npm运行服务从您的项目的根目录。
现在你转到您的浏览器中的localhost:8080并查看工作应用程序。
尝试做一些猜测! 希望,你可以通过测试,在我们写我们的测试之前。
使用 Jest 测试应用程序
在项目的根目录中创建一个名为__tests__的文件夹,该文件夹是标准的jest协议。
在__tests__中,创建一个名为app.spec.js的文件.默认情况下,jest将捕获项目中的任何名为*.spec.js或*.test.js的测试文件(通过文件夹进行反复搜索)。
在app.spec.js的顶部,我们将从@vue/test-utils以及我们的App组件中导入以下内容:
1import { mount } from '@vue/test-utils'
2import App from './../src/App.vue'
让我们写下我们的第一个测试。
1describe('App', () => {
2 // Inspect the raw component options
3 it('has data', () => {
4 expect(typeof App.data).toBe('function')
5 })
6})
在您的终端中运行npm 测试 - 测试应该通过! 这是一个相当基本的测试,它检查我们的组件的数据是否是一个函数。
让我们在我们的测试文件中添加另一个描述块。
1describe('Mounted App', () => {
2 const wrapper = mount(App);
3
4 test('does a wrapper exist', () => {
5 expect(wrapper.exists()).toBe(true)
6 })
7})
这一次,我们安装了组件,这给了我们一个包装器。
<$>[warning]
警告: 自发布以来 isVueInstance已被删除。 is a Vue instance 的测试已被重写为does a wrapper exist.
<$>
我们可以使用它来验证某些值是否存在,使用Jest的期望函数,我们可以写这样的测试:
1it('renders the correct markup', () => {
2 expect(wrapper.html()).toContain('What is the sum of the two numbers?')
3})
还有这个:
1// it's also easy to check for the existence of elements
2it('has a button', () => {
3 expect(wrapper.find('button').exists()).toBe(true)
4})
<$>[warning]
警告: 自发布后 contains已被删除。
这些测试都通过了!让我们为该应用程序的更多Vue特定的功能写一些测试。
1it('renders correctly with different data', async () => {
2 wrapper.setData({ x1: 5, x2: 10 })
3 await wrapper.vm.$nextTick()
4 expect(wrapper.text()).toContain('10')
5})
setData允许您设置组件的数据. 由于这些变量被初始化为数据,它们是反应性的. 然而,当我们嘲笑我们的组件时,我们必须在wrapper.vm上调用$nextTick(),这是包装的底部组件。
最后,我们将测试我们的应用程序是否根据我们打算做什么提供正确的输出 - 测试添加!
1it('button click without correct sum', () => {
2 expect(wrapper.vm.message).toBe("")
3 const button = wrapper.find('button')
4 button.trigger('click')
5 expect(wrapper.vm.message).toBe('TRY AGAIN')
6})
「wrapper.find」返回按钮元素的包裹(虽然我们的页面上有2个按钮,我们想要的是页面上的第一个按钮,所以它被抓住)。「x1」和「x2」是从我们之前的测试中设置的。但「猜测」,通过「v-model」连接到输入元素的变量不是。
1it('button click with correct sum', () => {
2 wrapper.setData({ guess: "15" })
3 const button = wrapper.find('button')
4 button.trigger('click')
5 expect(wrapper.vm.message).toBe('SUCCESS!')
6})
另一方面,当我们将总数设置为正确时,wrapper.vm.message 将表示成功!
结论
我希望本教程对你有帮助,看看如何开始使用 Jest 测试 Vue.js! 好运! 测试你的应用!
从这一点开始,如果你有兴趣深入了解Jest能做什么,我建议你阅读 Snapshot测试。