使用 AVA 和 TypeScript 测试 Nuxtjs 应用程序

Posted 2023-02-22

【中文标题】使用 AVA 和 TypeScript 测试 Nuxtjs 应用程序

【英文标题】：Testing Nuxtjs App with AVA and TypeScript

【发布时间】：2020-06-27 13:43:31

【问题描述】：

我正在使用 TypeScript 创建一个 Nuxt 应用程序，并希望使用 AVA 进行单元测试。但是，当我尝试运行测试时，我得到：

✖ 找不到任何要测试的文件

我已安装 @nuxt/typescript-build 并将其添加到我的 nuxt.config.js

项目结构（不包括 package.json 之类的东西）：

- components/
  - CardItem.vue
- test/
  - specs/
    -CardItem.spec.ts
  - ava.setup.js
- ava.config.cjs
- nuxt.config.js
- tsconfig.json

这是我的ava.config.cjs：

module.exports = () => 
  return 
    require: ['./test/ava.setup.js'],
    ignoredByWatcher: ['!**/*.js,vue'],
    babel: true,
    tap: false,
    verbose: false,
    color: true
  

这是我的ava.setup.js：

require('browser-env')()
const hooks = require('require-extension-hooks')
const Vue = require('vue')

Vue.config.productionTip = false

window.Date = global.Date = Date

hooks('vue')
  .plugin('vue')
  .push()
hooks(['vue', 'js'])
  .exclude(( filename ) => filename.match(/\/node_modules\//))
  .plugin('babel')
  .push()

这是我的tsconfig.json：

  "compilerOptions": 
    "target": "es2018",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["esnext", "esnext.asynciterable", "dom"],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": 
      "~/*": ["./*"],
      "@/*": ["./*"]
    ,
    "types": ["@types/node", "@nuxt/types"]
  ,
  "exclude": ["node_modules"]

这是我的CardItem.spec.ts：

import test from 'ava'
import  shallowMount  from '@vue/test-utils'
import CardItem from '@/components/CardItem.vue'

test('renders it\'s graphic', async t => 
  const wrapper = shallowMount(CardItem)

  t.fail()
)

【参考方案1】：

根据this，Ava 默认不查找 typescript 文件扩展名。看起来您还需要https://github.com/avajs/typescript，所以我建议您先阅读该自述文件。