前端单元测试jest

不是开源项目，我们一般都很少写单元测试。不过像单元测试框架jest, 还有mocha+chai可以了解下，万一哪天自己会写开源项目呢

vue脚手架创建项目的时候会让你选择单元测试框架.png

初始化成功之后页面会出现 tests的文件夹

项目目录

我们写单元测试的时候会在tests下面建立一个 ××.spec.js的文件，比如以下是一个计数器的测试文件

我们首先来看看Counter.vue这个文件的代码

<template>
  <div>
    <span>count: {{ count }}</span>
    <button @click="handleClick">count++</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    handleClick() {
      this.count++;
      this.$emit("change", this.count);
    }
  }
};
</script>
<style></style>

然后再来看看tests文件夹下的unit文件夹里面写了一个Counter.spec.js

import { mount } from "@vue/test-utils";
import Counter from "@/components/Counter.vue";
import sinon from "sinon";

describe("Counter.vue", () => {
  const change = sinon.spy();
  const wrapper = mount(Counter, {
    listeners: {
      change
    }
  });
  it("renders counter html", () => {
    expect(wrapper.html()).toMatchSnapshot();  // 测试模板页面，生成一个快照，下次修改模板页面时测试会不通过
  });
  it("count++", () => {
    const button = wrapper.find("button");   
    button.trigger("click");
    expect(wrapper.vm.count).toBe(1); // 测试点击之后是不是会变成1
    expect(change.called).toBe(true); //  测试点击之后是不是会发射一个change的函数
    button.trigger("click");
    expect(change.callCount).toBe(2);   // 测试第二次点击之后会不会count会不会变成2
  });
});

在语法上Mocha+chai与jest有点类似，更多的断言

猜你喜欢