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

Question

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

'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 项目时，select Jest 进行测试，并在其上安装Vue 测试库：

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

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

   样品 output：

    $ 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. 使用test NPM 脚本运行测试（从步骤 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设置来配置测试文件的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 演示