使用vue-testing-library包进行整合测试

1. 使用Jest进行单元测试那篇文章中的组件Counter.vue。
2. 添加vue-testing-library包。
3. 在tests目录下添加integration目录。
4. 从tests目录下的unit目录中拷贝.eslintrc.js一份到integration目录，并在integration目录中新建Counter.spec.js文件。

测试代码样例如下：

import { render, fireEvent } from 'vue-testing-library'
import Counter from '@/components/Counter.vue'

describe("Counter.vue", () => {
    it("渲染Counter组件", () => {
        const { getByText } = render(Counter)
        expect(getByText("0"))
    })

    it("加1", async () => {
        const { getByText } = render(Counter)
        await fireEvent.click(getByText("加"))
        expect(getByText("1"))
    })

    it("因数", async () => {
        const { getByText } = render(Counter, { props: { factor: 10 } })
        await fireEvent.click(getByText("加"))
        expect(getByText("10"))
    })
})

这里我们也看出了整合测试和单元测试的区别，整合测试加入了模拟操作软件的行为。更具体的使用说明见官方文档。