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

Question

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

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

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

尽管如此，有没有一种简单的方法可以使用Vue Testing Librarywith 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. 使用 脚手架构建 Nuxt 项目create-nuxt-app，然后在提示符处选择JestTesting 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. 使用testNPM 脚本（从第 1 步搭建的脚手架）运行测试：

   npm run test
   

在现有 Nuxt 项目上设置

对于已经存在的没有测试框架的 Nuxt 项目，模仿jest模板 from@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：

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

3. 添加一个Jest 配置：

   $ 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
   

4. 添加Babel 配置：

   npm install -D @testing-library/vue
   

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

   示例组件：

   npm run test
   

   示例测试：

   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
   

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

   npm run test
   

GitHub 演示