如何在 Nuxt.js 中使用 Vue 测试库？

如何解决如何在 Nuxt.js 中使用 Vue 测试库？

我想在我的 Nuxt.js 应用中使用 Vue Testing Library。但是在安装软件包后立即启动测试会触发此错误：

'vue-cli-service' 未被识别为内部或外部命令、可运行的程序或批处理文件。

这大概是因为 Nuxt.js 不使用 vue-cli-service。

尽管如此，有没有一种简单的方法可以将 Vue Testing Library 与 Nuxt.js 一起使用？

解决方法

听起来您可能有一个包含 vue-cli-service 的 NPM 脚本（如下所示），但这适用于 Vue CLI 脚手架项目：

{
  "scripts": {
    "test:unit": "vue-cli-service test:unit" ❌ not for Nuxt projects
  }
}

但是，您可以使用下面概述的方法之一设置 Vue 测试库。

设置新项目

生成新的 Nuxt 项目时，选择 Jest 进行测试，并在其之上安装 Vue 测试库：

使用 create-nuxt-app 搭建 Nuxt 项目，然后在 Testing framework 提示符下选择 Jest：

npx create-nuxt-app nuxt-testing-library-demo

示例输出：

$ npx create-nuxt-app nuxt-testing-library-demo

create-nuxt-app v3.5.2
✨  Generating Nuxt.js project in  nuxt-testing-library-demo
[...]
? Testing framework: Jest

安装 Vue 测试库：
```
npm install -D @testing-library/vue
```
使用 test NPM 脚本（从第 1 步搭建的脚手架）运行测试：
```
npm run test
```

在现有 Nuxt 项目上设置

对于已经存在的没有测试框架的 Nuxt 项目，模仿 jest template from @nuxt/create-nuxt-app 添加 Vue 测试库支持：

安装必备的 NPM 包：

npm install -D @testing-library/vue \
               vue-jest@^3 \
               jest@^26 \
               babel-core@7.0.0-bridge.0 \
               babel-jest@^26

npm install -D ts-jest@^26 # if using TypeScript

添加 NPM script 以运行 Jest CLI：

// <rootDir>/package.json
{
  "scripts": {
    "test": "jest"
  }
}

添加一个 Jest config：

// <rootDir>/jest.config.js
module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1','^~/(.*)$': '<rootDir>/$1','^vue$': 'vue/dist/vue.common.js'
  },moduleFileExtensions: [
    'ts',// if using TypeScript
    'js','vue','json'
  ],transform: {
    "^.+\\.ts$": "ts-jest",// if using TypeScript
    '^.+\\.js$': 'babel-jest','.*\\.(vue)$': 'vue-jest'
  },collectCoverage: true,collectCoverageFrom: [
    '<rootDir>/components/**/*.vue','<rootDir>/pages/**/*.vue'
  ]
}

添加一个 Babel config：

// <rootDir>/.babelrc
{
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",{
            "targets": {
              "node": "current"
            }
          }
        ]
      ]
    }
  }
}

创建一个 test 目录，其中包含如下所示的示例测试文件（取自 Vue Testing Library example）。 请注意，可以使用 jest.config.js 中的 testMatch 或 testRegex 设置来配置测试文件的位置。

示例组件：

<!-- <rootDir>/components/Counter.vue -->
<template>
  <div>
    <p>Times clicked: {{ count }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
  export default {
    data: () => ({
      count: 0,}),methods: {
      increment() {
        this.count++
      },},}
</script>

示例测试：

// <rootDir>/test/Counter.spec.js
import {render,screen,fireEvent} from '@testing-library/vue'
import Counter from '@/components/Counter.vue'

test('increments value on click',async () => {
  render(Counter)
  expect(screen.queryByText('Times clicked: 0')).toBeTruthy()

  const button = screen.getByText('increment')
  await fireEvent.click(button)
  await fireEvent.click(button)
  expect(screen.queryByText('Times clicked: 2')).toBeTruthy()
})

使用 test NPM 脚本运行测试（在第 2 步中添加）：
```
npm run test
```

GitHub demo