做Vue开发有一段时间了，测试一直是个头疼的问题，直到用了Vue Test Utils，测试效率提升了很多，今天就来推荐一下这个工具，以及相关的测试工具链。

Vue，是，目前，最，流行，的，前端，框架，之一，很多，团队，都，在，用，Vue，开发，前端，应用，但是，很多，团队，对，前端，测试，不够，重视，或者，不知道，怎么，写，前端，测试，导致，项目，质量，不，够，高，回归，测试，全，靠，人工，效率，很，低，也，容易，出，问题。

我，之前，的，团队，也，是，这样，测试，一直，是，个，头疼，的，问题，直到，用，了，Vue Test Utils，配合，Jest，等，工具，测试，效率，提升，了，很多，项目，质量，也，提高，了，不少，今天，这篇，文章，就，来，推荐，一下，Vue Test Utils，这个，工具，以及，相关，的，测试，工具链。

一、为什么要做前端测试

在，推荐，工具，之前，先，说说，为什么，要，做，前端，测试，很多，朋友，可能，觉得，前端，测试，不重要，或者，太，麻烦，不想，写，但是，前端，测试，其实，很，重要。

首先，前端，测试，能，提高，项目，质量，通过，测试，能，发现，代码，中，的，bug，和，问题，在，上线，之前，就，修复，避免，把，问题，带，到，线上，影响，用户，体验，而且，有，了，测试，之后，改，代码，的，时候，更，有，信心，不怕，改，坏，其他，功能，因为，测试，能，帮，你，验证，修改，有没有，影响，其他，功能。

其次，前端，测试，能，提高，开发，效率，虽然，写，测试，需要，花，时间，但是，从，长期，来看，能，节省，时间，因为，有，了，测试，之后，回归，测试，可以，自动化，不用，每次，都，人工，点，一遍，能，节省，大量，的，人工，测试，时间，而且，改，代码，的，时候，测试，能，快速，反馈，有没有，问题，不用，等，人工，测试，才能，发现，问题。

再次，前端，测试，能，改善，代码，设计，要，写，好，测试，代码，必须，是，可测试，的，这，就，要求，代码，设计，合理，耦合，度，低，职责，单一，所以，写，测试，的，过程，其实，也，是，改善，代码，设计，的，过程，能，让，代码，更，好，维护，更，好，扩展。

所以，前端，测试，是，很，有，价值，的，值得，投入，时间，和，精力，去，做，而，Vue Test Utils，就是，帮，你，更，好，地，写，Vue，组件，测试，的，工具。

二、Vue Test Utils是什么

Vue Test Utils，是，Vue，官方，的，单元测试，工具库，是，Vue，团队，官方，维护，的，专门，用来，测试，Vue，组件，的，工具，能，让，你，很，方便，地，挂载，Vue，组件，模拟，用户，交互，断言，组件，的，状态，和，输出，等等，是，写，Vue，组件，单元测试，的，必备，工具。

Vue Test Utils，的，核心，功能，有，几个：

  1. 组件挂载：能，很，方便，地，挂载，Vue，组件，创建，组件，实例，支持，挂载，到，DOM，或者，浅挂载，不，挂载，子组件，提高，测试，速度。
  1. 模拟用户交互：能，模拟，用户，的，各种，交互，比如，点击，输入，选择，等等，能，触发，组件，的，事件，测试，组件，对，用户，交互，的，响应。
  1. 查找元素：能，很，方便，地，查找，组件，里，的，DOM，元素，和，子组件，支持，选择器，查找，能，断言，元素，的，存在，属性，文本，等等。
  1. 断言工具：提供，了，很多，方便，的，断言，方法，比如，判断，元素，是否，存在，文本，是否，正确，属性，是否，正确，事件，是否，触发，等等，能，让，测试，代码，更，简洁，更，易读。
  1. 模拟和存根：能，模拟，组件，的，props，data，methods，等等，也，能，存根，子组件，和，依赖，让，测试，更，纯粹，只，关注，当前，组件，的，逻辑。

Vue Test Utils，支持，Vue 2，和，Vue 3，两个，版本，分别，有，对应的，包，Vue 2，用，@vue/test-utils，Vue 3，用，@vue/test-utils@next，或者，叫，@vue/test-utils，的，新版本，大家，根据，自己，的，Vue，版本，选择，对应，的，包，就，行。

三、相关工具链推荐

Vue Test Utils，本身，只是，一个，组件，测试，工具库，要，完整，地，做，前端，测试，还，需要，其他，工具，配合，下面，就，推荐，一下，完整，的，测试，工具链。

1. Jest

Jest，是，目前，最，流行，的，JavaScript，测试，框架，是，Facebook，开源，的，功能，非常，强大，支持，单元测试，集成测试，快照，测试，覆盖率，统计，等等，而且，配置，简单，容易，上手，速度，也，很，快，是，前端，测试，的，首选，框架。

Jest，和，Vue Test Utils，配合，很，好，Vue，官方，的，脚手架，Vue CLI，也，默认，支持，Jest，创建，项目，的，时候，选，了，测试，就，会，自动，配置，好，Jest，和，Vue Test Utils，直接，就能，写，测试，很，方便。

Jest，的，优点，是，功能，全，配置，简单，速度，快，社区，活跃，文档，完善，而且，支持，TypeScript，Babel，Webpack，等，各种，工具，链，能，满足，各种，项目，的，需求，是，前端，测试，框架，的，首选。

2. Vue Test Utils

这个，刚才，已经，介绍，过，了，是，Vue，官方，的，组件，测试，工具库，和，Jest，配合，使用，能，很，方便，地，写，Vue，组件，的，单元测试。

3. @vue/cli-plugin-unit-jest

如果，用，Vue CLI，创建，项目，的话，可以，直接，用，这个，插件，自动，配置，好，Jest，和，Vue Test Utils，不用，自己，手动，配置，很，方便，创建，项目，的，时候，选，上，Unit Testing，然后，选，Jest，就，会，自动，安装，和，配置，好，直接，就能，写，测试，运行，测试。

4. babel-jest

如果，项目，用，了，Babel，转译，代码，的话，需要，用，babel-jest，让，Jest，能，处理，Babel，转译，的，代码，一般，Vue CLI，会，自动，配置，好，不用，自己，管，如果，是，手动，配置，的话，需要，安装，和，配置，babel-jest。

5. ts-jest

如果，项目，用，了，TypeScript，的话，需要，用，ts-jest，让，Jest，能，处理，TypeScript，代码，直接，测试，TypeScript，写，的，Vue，组件，不用，先，转译，很，方便。

6. jest-serializer-vue

这是，一个，Jest，的，快照，序列化，器，能，让，Vue，组件，的，快照，更，简洁，更，易读，是，Vue，官方，推荐，的，工具，如果，用，快照，测试，的话，建议，安装，这个，工具。

7. @testing-library/vue

这是，另一个，Vue，测试，工具，是，Testing Library，系列，的，Vue，版本，和，Vue Test Utils，不同，它，更，强调，从，用户，的，角度，测试，组件，而，不是，从，实现，细节，的，角度，测试，理念，是，"测试你的软件，而不是它的实现细节"，能，让，测试，更，健壮，不，容易，因为，重构，而，失败，也是，很，好，的，Vue，测试，工具，可以，和，Vue Test Utils，互补，或者，替代，看，个人，喜好。

8. Cypress

如果，需要，做，端到端，测试，E2E，的话，推荐，Cypress，这是，目前，最，流行，的，前端，端到端，测试，工具，功能，强大，使用，方便，能，模拟，真实，用户，的，操作，测试，整个，应用，的，流程，而且，有，很，好，的，调试，体验，测试，失败，的，时候，能，看到，截图，和，视频，很，方便，排查，问题，和，Jest，加，Vue Test Utils，的，单元测试，配合，能，形成，完整，的，测试，体系。

四、Vue Test Utils的基本使用

下面，简单，介绍，一下，Vue Test Utils，的，基本，使用，让，没，用，过，的，朋友，有，个，概念。

首先，安装，Vue Test Utils，和，Jest，如果，用，Vue CLI，的话，创建，项目，的，时候，选，测试，就，自动，安装，好，了，如果，手动，安装，的话，用，npm，或者，yarn，安装，@vue/test-utils，jest，vue-jest，等，包，就，行。

然后，写，测试，文件，一般，测试，文件，和，组件，文件，放，在，一起，或者，放，在，tests，目录，里，命名，是，组件名.spec.js，或者，组件名.test.js，比如，HelloWorld.vue，的，测试，文件，是，HelloWorld.spec.js。

一个，简单，的，测试，例子，大概，是，这样，的：

import { mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = mount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

这个，测试，很，简单，挂载，HelloWorld，组件，传入，msg，prop，然后，断言，组件，渲染，的，文本，包含，传入，的，msg，这，就是，一个，最，基本，的，Vue，组件，测试。

Vue Test Utils，提供，了，mount，和，shallowMount，两个，挂载，方法，mount，会，完整，挂载，组件，包括，所有，子组件，shallowMount，只会，挂载，当前，组件，子组件，会，被，存根，不，会，真正，挂载，这样，测试，速度，更，快，也，更，纯粹，只，测试，当前，组件，的，逻辑，不，受，子组件，的，影响，一般，单元测试，推荐，用，shallowMount，集成测试，用，mount。

挂载，之后，会，返回，一个，wrapper，对象，这个，对象，包含，了，组件，实例，和，很多，方便，的，方法，比如，text()，获取，组件，的，文本，html()，获取，组件，的，HTML，find()，查找，元素，trigger()，触发，事件，setProps()，设置，props，setData()，设置，data，vm，访问，组件，实例，等等，能，很，方便，地，操作，和，断言，组件。

比如，测试，用户，点击，按钮，的，例子：

it('increments counter when button is clicked', async () => {
  const wrapper = mount(Counter)
  await wrapper.find('button').trigger('click')
  expect(wrapper.find('.count').text()).toBe('1')
})

这个，测试，挂载，Counter，组件，找到，按钮，触发，点击，事件，然后，断言，计数，显示，为，1，注意，这里，用，了，async/await，因为，Vue，的，DOM，更新，是，异步，的，触发，事件，之后，需要，等，DOM，更新，完，才能，断言，所以，要，await，trigger()，或者，用，nextTick()。

比如，测试，组件，触发，事件，的，例子：

it('emits submit event with form data when form is submitted', async () => {
  const wrapper = mount(Form)
  await wrapper.find('input').setValue('test')
  await wrapper.find('form').trigger('submit')
  expect(wrapper.emitted().submit[0]).toEqual(['test'])
})

这个，测试，挂载，Form，组件，给，输入框，设值，提交，表单，然后，断言，组件，触发，了，submit，事件，并且，事件，参数，是，输入，的，值，emitted()，方法，能，获取，组件，触发，的，所有，事件，很，方便，测试，组件，的，事件。

这些，只是，Vue Test Utils，的，基本，用法，还有，很多，高级，用法，比如，模拟，Vuex，模拟，Vue Router，模拟，插件，自定义，存根，等等，大家，可以，看，官方，文档，学习，更多，用法。

五、使用Vue Test Utils的一些技巧和最佳实践

下面，分享，一些，使用，Vue Test Utils，的，技巧，和，最佳，实践，都是，我，实际，使用，中，积累，的，经验，希望，能，帮，到，大家。

1. 优先用shallowMount做单元测试

单元测试，应该，只，关注，当前，组件，的，逻辑，不，应该，受，子组件，的，影响，所以，优先，用，shallowMount，而，不是，mount，shallowMount，会，把，所有，子组件，都，存根，掉，不，真正，挂载，这样，测试，速度，更，快，也，更，纯粹，只，测试，当前，组件，的，逻辑，如果，需要，测试，组件，和，子组件，的，交互，那，是，集成测试，再，用，mount。

2. 测试行为，不是实现细节

测试，应该，关注，组件，的，行为，也就是，用户，能，看到，和，操作，的，东西，比如，渲染，的，文本，用户，交互，的，响应，触发，的，事件，等等，而，不是，组件，的，内部，实现，细节，比如，内部，的，data，变量，methods，方法，等等，因为，实现，细节，可能，会，变，但是，行为，不，应该，变，如果，测试，依赖，实现，细节，那么，重构，的，时候，测试，就，会，失败，即使，行为，没有，变，这样，的，测试，很，脆弱，所以，要，测试，行为，不是，实现，细节。

3. 合理使用快照测试

快照，测试，能，很，方便，地，测试，组件，的，渲染，输出，防止，意外，修改，组件，的，渲染，结果，但是，快照，测试，不要，滥用，不是，所有，组件，都，需要，快照，测试，而且，快照，太，大，的话，很难，审查，也，容易，忽略，真正，的，问题，建议，只，对，比较，稳定，的，小组件，用，快照，测试，而且，快照，要，定期，审查，确保，是，正确，的，不要，盲目，更新，快照。

4. 模拟外部依赖

测试，组件，的，时候，如果，组件，依赖，外部，的，东西，比如，Vuex，Vue Router，API，请求，等等，要，模拟，这些，依赖，不要，真正，调用，外部，服务，因为，外部，服务，可能，不，稳定，也，会，让，测试，变慢，而且，单元测试，应该，只，测试，组件，的，逻辑，不，应该，依赖，外部，服务，Vue Test Utils，提供，了，mocks，选项，能，很，方便，地，模拟，Vue，原型，上，的，方法，比如，$http，$router，$store，等等，也，可以，用，jest.mock，模拟，模块。

5. 保持测试简洁和可读

测试，代码，也是，代码，需要，维护，所以，要，保持，测试，简洁，和，可读，每个，测试，用例，只，测试，一个，东西，不要，一个，测试，用例，测试，很多，东西，这样，测试，失败，的，时候，能，快速，定位，问题，而且，测试，的，描述，要，清晰，说明，测试，的，是什么，行为，让人，一看，就，懂，不要，写，模糊，的，描述。

6. 注意异步测试

Vue，的，DOM，更新，是，异步，的，所以，测试，中，涉及，DOM，更新，的，地方，要，注意，异步，处理，比如，触发，事件，之后，要，await，或者，用，nextTick，再，断言，不然，可能，断言，的，是，更新，前，的，DOM，导致，测试，失败，或者，不准确，Vue Test Utils，的，trigger，setValue，等，方法，都，返回，Promise，所以，直接，await，就，行，很，方便。

7. 定期运行测试和检查覆盖率

测试，写，了，之后，要，定期，运行，确保，测试，都，通过，而且，要，检查，测试，覆盖率，确保，核心，代码，都，被，测试，覆盖，了，Jest，自带，覆盖率，统计，功能，运行，的，时候，加，--coverage，参数，就，能，生成，覆盖率，报告，能，看到，哪些，代码，被，覆盖，了，哪些，没有，建议，把，测试，集成，到，CI/CD，流程，中，每次，提交，代码，都，自动，运行，测试，不，通过，不，允许，合并，这样，能，保证，代码，质量。

六、常见问题和坑

最后，说，说，使用，Vue Test Utils，常见，的，问题，和，坑，帮，大家，避免，踩坑。

1. 异步更新问题

刚才，说，过，Vue，的，DOM，更新，是，异步，的，很多，新手，容易，忘，触发，事件，之后，直接，断言，导致，测试，失败，或者，不准确，记住，涉及，DOM，更新，的，地方，要，await，或者，用，nextTick。

2. 组件名问题

用，shallowMount，的，时候，子组件，会，被，存根，存根，的，组件，名，是，原，组件名，加，"-stub"，如果，用，find，找，子组件，的话，要，注意，这个，或者，用，组件，对象，来，find，不要，用，字符串，组件名，避免，这个，问题。

3. props传递问题

挂载，组件，的，时候，传递，props，用，propsData，选项，不是，props，很多，新手，容易，写错，写成，props，导致，props，没，传，进去，测试，失败，记住，是，propsData。

4. 第三方组件问题

如果，组件，里，用，了，第三方，组件，比如，Element UI，Vuetify，等等，测试，的，时候，可能，会，有，问题，因为，第三方，组件，可能，依赖，一些，全局，的，东西，比如，Vue，插件，指令，等等，这，时候，需要，在，挂载，的，时候，配置，localVue，安装，对应的，插件，或者，用，stubs，存根，第三方，组件，避免，这些，问题。

5. 样式和CSS问题

测试，组件，的，时候，一般，不，需要，关心，样式，和，CSS，所以，Jest，配置，里，一般，会，把，CSS，文件，mock，掉，不，处理，不然，import，CSS，的，时候，会，报错，Vue CLI，默认，会，配置，好，如果，手动，配置，的话，要，注意，配置，moduleNameMapper，把，CSS，文件，mock，掉。

七、写在最后

Vue Test Utils，是，一个，很，好用，的，Vue，组件，测试，工具，配合，Jest，等，工具，能，大大，提升，前端，测试，的，效率，和，项目，质量，如果你，在，做，Vue，开发，还，没有，写，测试，或者，测试，写，得，很，痛苦，建议，试试，Vue Test Utils，配合，Jest，应该，能，给，你，带来，很，大，的，提升。

当然，测试，只是，保证，质量，的，手段，不是，目的，不要，为了，测试，而，测试，也，不要，追求，100%，的，覆盖率，要，根据，项目，的，实际，情况，合理，地，写，测试，重点，覆盖，核心，业务，逻辑，和，容易，出问题，的，地方，这样，才能，用，最，少，的，投入，获得，最，大，的，收益。

而且，前端，测试，也，不，只有，单元测试，还有，集成测试，端到端，测试，等等，不同，层级，的，测试，有，不同，的，作用，要，结合，起来，用，形成，完整，的，测试，体系，才能，更，好，地，保证，项目，质量。

最后，希望，这篇，文章，能，给，做，Vue，开发，的，朋友，一些，参考，也，欢迎，大家，在，评论，区，分享，你们，用，Vue Test Utils，的，经验，和，技巧，一起，交流，一起，进步。

愿，我们，都，能，写出，高质量，的，代码，和，测试，做，出，稳定，可靠，的，产品。