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

EN

听起来，您可能有一个包含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创建-nuxt-app nuxt-测试-库-演示 样本输出： $nuxt app nuxt-测试-库-演示创建-✨v3.5.2✨生成在nuxt-测试-库-演示.？测试框架: Jest
2. 安装Vue测试库( Nuxt 2所需的v5)： npm安装-D @testing库/vue@5
3. 使用test NPM脚本运行测试(脚手架从步骤1开始)： npm运行试验

现有Nuxt项目的设置

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

1. 安装必要的NPM包： 安装-D @jest库/vue@5\ vue-jest@^3 \ jest@^26 \ babel-core@7.0.0-bridge.0 .0\ babel-jest@^26 npm安装-D ts-jest@^26 #(如果使用TypeScript )

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

1. 添加一个运行Jest的NPM脚本： // /package.json {“脚本”：{“测试”："jest“}
2. 添加一个Jest配置： // /jest.config.js module.exports ={ moduleNameMapper：{ '^@/(.*)$'：'/$1'，'^~/(.*)$'：'/$1'，'^vue$'：'vue/dist/vue.common.js‘}，moduleFileExtensions：'ts'，//如果使用TypeScript 'js'，'vue'，'json’，转换：{ "^.+\.ts$"："ts-jest"，//如果使用TypeScript '^.+\.js$'：'babel-jest'，‘.*\.(Vue)$’'vue-jest‘}，collectCoverage: true，collectCoverageFrom：’/components/*.vue‘，’/page/*.vue‘}
3. 添加一个Babel配置： // /.babelrc { "env"：{ "test"：{“预设”：[“@babel/预设-env”，{“目标”：{“节点”：“当前”}
4. 创建一个test目录，其中包含下面所示的示例测试文件(取自示例)。注意，可以使用https://jestjs.io/docs/configuration#testmatch-arraystring或https://jestjs.io/docs/configuration#testregex-string--arraystring设置在jest.config.js__中配置测试文件的位置。 示例组件:示例测试： 从“@test-库/vue”导入计数器“@/components/Accoun.vue”测试(“单击增量值”)，异步c () => {呈现(计数器) expect(screen.queryByText('Times单击:0‘).toBeTruthy() const按钮=screen.getByText(’增量‘)等待fireEvent.click(按钮)等待fireEvent.click(按钮)期待(screen.queryByText(’时间点击:2‘).toBeTruthy() })
5. 使用test NPM脚本运行测试(在步骤2中添加)： npm运行试验

GitHub演示