Vue前端自动化测试-Vue Test Utils-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue前端自动化测试-Vue Test Utils。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue Test Utils简介

vue-test-utils是vue官方的单元测试框架，提供了一系列非常方便的工具，使我们更轻松地为vue构建的应用来编写单元测试。主流的JavaScript测试运行器有很多，但vue-test-utils都能支持。它是与测试运行器无关的。

环境配置

通过脚手架 vue-cli 来新建项目的时候，如果选择了 Unit Testing 单元测试且选择的是 Jest 作为测试运行器，那么在项目创建好后，就会自动配置好单元测试需要的环境。本文主要讲的就是新建项目之初没有选择单元测试功能，需要后面去添加的配置。

npm i @vue/cli-plugin-unit-jest -D

npm i @vue/test-utils -D

v3:npm i @vue/vue3-jest@^27.0.0-alpha.1 -D
v2:npm i @vue/vue2-jest@^27.0.0-alpha.2 -D

配置Jest

项目根目录创建jest.config.js文件

module.exports = {
  //有啥需要就在这里配置...
  preset: "@vue/cli-plugin-unit-jest",
};

配置package.json

  "scripts": {
    "test": "vue-cli-service test:unit",
  },

编写测试文件

项目根目录创建tests/unit/example.spec.js文件

import { shallowMount } 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 = shallowMount(HelloWorld, {
      props: { msg },
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

HelloWorld.vue文件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>

</style>