教你如何编写Vue.js的单元测试的方法(3)

希望这段代码对你来说能够很清楚，但是它不是特别容易理解，特别是对于第一次进行VueJS测试的人来说。有一个VueJS实用程序库，其中包含了一些更复杂的外观代码。要使用它，我们可以转到我们的项目根目录并运行以下命令：

npm install avoriaz

现在我们可以隐藏mount()之后的Vue组件的设置，并且为了单击按钮，我们需要的是两行代码：find()该按钮和dispatch() ）点击事件。

import { mount } from 'avoriaz'; import List from '@/components/List'; import Vue from 'vue'; describe('List.vue', () => { // previous tests .. it('adds new item to list on click with avoriaz', () => { // build component const ListComponent = mount(List); // set input value ListComponent.setData({ newItem: 'brush my teeth', }); // simulate click event const button = ListComponent.find('button')[0]; button.dispatch('click'); // assert list contains new item expect(ListComponent.text()).to.contain('brush my teeth'); expect(ListComponent.data().listItems).to.contain('brush my teeth'); }) })

总结

我个人认为写作测试对于我的正常工作流程至关重要，但是使用JavaScript，特别是VueJS，我开始碰到一些麻烦。希望本教程将帮助任何与我一样遇到麻烦的人！