如何在 Nuxt.js 中使用 Vue 测试库? [英] How to use Vue Testing Library with Nuxt.js?
问题描述
我想在我的 Nuxt 中使用 Vue 测试库.js 应用程序.但是在安装软件包后立即启动测试会触发此错误:
I want to use Vue Testing Library in my Nuxt.js app. But straight after installing the package, launching a test triggers this error:
'vue-cli-service' 未被识别为内部或外部命令、可运行的程序或批处理文件.
'vue-cli-service' is not recognized as an internal or external command, operable program or batch file.
这大概是因为 Nuxt.js 没有使用 vue-cli-service.
This is presumably because Nuxt.js does not use vue-cli-service.
尽管如此，是否有一种简单的方法可以将 Vue 测试库 与 Nuxt.js 一起使用?
Despite that, is there a simple way to use Vue Testing Library with Nuxt.js?
推荐答案
听起来你可能有一个包含 vue-cli-service 的 NPM 脚本(如下所示)，但它是为Vue CLI 脚手架项目:
It sounds like you might have an NPM script that includes vue-cli-service (as shown below), but that's intended for Vue CLI scaffolded projects:
{
"scripts": {
"test:unit": "vue-cli-service test:unit" ❌ not for Nuxt projects
}
}
但是，您可以使用下面概述的方法之一设置 Vue 测试库.
However, you could setup Vue Testing Library using one of the methods outlined below.
生成新的 Nuxt 项目时，选择 Jest 进行测试，并在其上安装 Vue 测试库:
When generating a new Nuxt project, select Jest for testing, and install Vue Testing Library on top of that:
使用
create-nuxt-app，然后在Testing framework提示处选择 Jest:
npx create-nuxt-app nuxt-testing-library-demo
示例输出:
安装 Vue 测试库:
Install Vue Testing Library:
使用 test NPM 脚本运行测试(从第 1 步构建):
npm install -D @testing-library/vue
Run tests with the test NPM script (scaffolded from step 1):
在现有 Nuxt 项目上设置
对于已经存在的没有测试框架的 Nuxt 项目，模仿 jest 模板来自 @nuxt/create-nuxt-app 以添加 Vue 测试库em> 支持:
安装必备的 NPM 包:
Setup on existing Nuxt project
For an already existing Nuxt project that has no testing framework, mimic the jest template from @nuxt/create-nuxt-app to add Vue Testing Library support:
Install the prerequisite NPM packages:
添加一个 NPM 脚本来运行 Jest CLI:
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
Add an NPM script to run Jest CLI:
添加Jest 配置:
Add a Jest config:
添加Babel 配置:
Add a Babel config:
创建一个 test 目录，其中包含如下所示的示例测试文件(取自 Vue 测试库 示例).请注意，可以使用 testMatch 或 testRegex 设置在 jest.config.js.
// <rootDir>/.babelrc
{
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
}
}
示例组件:
Example component:<脚本>导出默认{数据:() =>({计数:0，}),方法: {增量() {this.count++},},}
示例测试:
// <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 步中添加):
Run tests with the test NPM script (added in step 2):
npm run test
这篇关于如何在 Nuxt.js 中使用 Vue 测试库?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
