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

Question

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

'vue-cli-service' 不是内部或外部命令、可运行程序或批处理文件。

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

尽管如此，有没有一种简单的方法来使用Vue Testing Librarywith Nuxt.js？

Answer 1

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

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

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

设置新项目

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

1. 用 搭建一个 Nuxt 项目，并在提示符处create-nuxt-app选择Jest ：Testing framework

   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
   

2. 安装Vue 测试库：

   npm install -D @testing-library/vue
   

3. test使用NPM 脚本运行测试（从步骤 1 开始）：

   npm run test
   

在现有 Nuxt 项目上设置

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

1. 安装必备的 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
   

2. 添加一个NPM 脚本来运行 Jest CLI：

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

3. 添加一个Jest 配置：

   // <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'
     ]
   }
   

4. 添加一个Babel 配置：

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

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

   示例组件：

   <!-- <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()
   })
   

6. test使用NPM 脚本运行测试（在步骤 2 中添加）：

   npm run test
   

GitHub 演示