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

Question

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

'vue-cli-service' is not recognized as an internal or external command, operable program or batch file.

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

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

Answer 1

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

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

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

新项目的设置

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

在 Testing framework 提示下使用 create-nuxt-app 和 select Jest 搭建一个 Nuxt 项目：

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 测试库（Nuxt 2 需要 v5）：
```
npm install -D @testing-library/vue@5
```
运行使用 test NPM 脚本进行测试（从第 1 步开始搭建）：
```
npm run test
```

在现有的 Nuxt 项目上设置

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

安装必备的 NPM 包：

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

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

For Nuxt v2, install @testing-library/vue@5.

将 NPM script 添加到运行 Jest CLI：

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

添加一个Jest config:

// <rootDir>/jest.config.js
module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/',
    '^~/(.*)$': '<rootDir>/',
    '^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 目录，包含下面显示的示例测试文件（取自 jest.config.js 中的 Vue Testing Library example). Note the location of the test files can be configured with the testMatch or 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

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

How to use Vue Testing Library with Nuxt.js?

vue.js

nuxt.js

testing-library

vue-testing-library

新项目的设置

在现有的 Nuxt 项目上设置