如何将Vue测试库与Nuxt.js一起使用

Question

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

"vue-cli-service"未被识别为内部或外部命令、可操作程序或批处理文件。

这可能是因为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项目时，选择Jest进行测试，并在其上安装Vue测试库：

1. 用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
   

2. 安装Vue测试库(Nuxt 2需要v5(：

   npm install -D @testing-library/vue@5
   

3. 使用testNPM脚本运行测试(从步骤1构建(：

   npm run test
   

在现有Nuxt项目上设置

对于一个没有测试框架的现有Nuxt项目，模仿@nuxt/create-nuxt-app中的jest模板，添加Vue测试库支持：

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

对于Nuxt v2，请安装@testing-library/vue@5。

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测试库示例(请注意，可以使用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()
   })
   

6. 使用testNPM脚本(在步骤2中添加(运行测试：

   npm run test
   

GitHub演示