在 Jest 中使用 Vue Test Utils 测试 Vue.js 组件的技巧

Jest 是一个流行的 JavaScript 测试框架，用于测试前端应用程序和组件。Vue Test Utils 是一个用于测试 Vue.js 组件的官方工具库。本文将介绍如何使用 Jest 和 Vue Test Utils 测试 Vue.js 组件的技巧，包括安装、配置、编写测试用例等。

安装 Jest 和 Vue Test Utils

首先，需要安装 Jest 和 Vue Test Utils。可以使用以下命令来安装它们：

npm install --save-dev jest vue-jest @vue/test-utils

配置 Jest

接下来，需要配置 Jest。在根目录下创建一个 jest.config.js 文件，并添加以下内容：

// javascriptcn.com 代码示例
module.exports = {
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': 'vue-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  testMatch: [
    '**/tests/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/',
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**/*.{js,vue}',
    '!src/main.js',
    '!src/router/index.js',
    '!**/node_modules/**'
  ]
}

这个配置文件告诉 Jest 如何处理不同的文件类型，如何查找测试用例，如何设置测试覆盖率等。

编写测试用例

现在，可以编写测试用例了。首先，创建一个测试文件夹 tests，并在其中创建一个测试文件 HelloWorld.spec.js，并添加以下内容：

// javascriptcn.com 代码示例
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 的 Vue.js 组件。它通过传递一个 msg 属性来渲染组件，并检查组件是否正确地渲染了该属性。

运行测试

现在，可以运行测试了。使用以下命令来运行测试：

npm run test

这个命令将运行 Jest，并在终端中显示测试结果。如果测试通过，将输出类似于以下内容：

// javascriptcn.com 代码示例
 PASS  tests/unit/example.spec.js
  Example
    ✓ should render correct contents (6ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.514s
Ran all test suites.

如果测试未通过，将输出类似于以下内容：

// javascriptcn.com 代码示例
 FAIL  tests/unit/example.spec.js
  Example
    ✕ should render correct contents (7ms)

  ● Example › should render correct contents

    expect(received).toMatch(expected) // 使用 .toMatch 匹配字符串或正则表达式

    Expected substring: "Welcome to Your Vue.js App"
    Received string:    "HelloWorld.vue"

      9 |     const msg = 'Welcome to Your Vue.js App'
      10 |     const wrapper = mount(HelloWorld, {
    > 11 |       propsData: { msg }
         |                   ^
      12 |     })
      13 |     expect(wrapper.text()).toMatch(msg)
      14 |   })

      at Object.<anonymous> (tests/unit/example.spec.js:11:19)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.575s
Ran all test suites.

总结

在 Jest 中使用 Vue Test Utils 测试 Vue.js 组件是非常重要的。它可以帮助开发人员发现和修复潜在的问题，提高代码质量和可维护性。本文介绍了如何安装、配置和编写测试用例，并运行测试。希望这篇文章能够帮助你更好地了解 Jest 和 Vue Test Utils，并开始测试 Vue.js 组件。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657bff6bd2f5e1655d6b8f1c