在 Nuxt、Vue、jest 和 Vuetify 中为项目编写单元测试

Posted 2023-02-22

【中文标题】在 Nuxt、Vue、jest 和 Vuetify 中为项目编写单元测试

【英文标题】：Writing Unit test for project in Nuxt, Vue, jest & Vuetify

【发布时间】：2020-06-25 12:55:16

【问题描述】：

TL;DR

从Vuetify link 复制的组件的单元测试通过了，但我在pug 中编写的组件的实际单元测试没有通过。

详情：

我正在开发一个使用Vue、NUXT、Vuetify 和pug 作为模板语言构建的项目。我正在配置项目以使用JEST 测试运行器编写测试用例。单元测试当前失败，我需要一些步骤来确定问题。

我已阅读以下内容：

https://vue-test-utils.vuejs.org/guides/#getting-started https://vuetifyjs.com/en/getting-started/unit-testing/

正在使用以下版本：

nuxt: ^2.0.0 nuxtjs/vuetify: ^1.10.2 pug: ^2.0.4 pug-plain-loader: ^1.0.0 jest: ^24.1.0 vue-jest: ^4.0.0-0

以下是相关的文件夹结构

<project root>/jest.config.js <project root>/components/common/CustomCard.vue <project root>/components/common/MessageDialog.vue <project root>/tests/unit/components/common/TestMessageDialog.spec.js <project root>/tests/unit/components/common/TestCustomCard.spec.js

以下是配置的相关部分：

jest.config.js

module.exports = 
  verbose: true,
  moduleNameMapper: 
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js'
  ,
  moduleFileExtensions: ['js', 'vue', 'json'],
  transform: 
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  ,
  'collectCoverage': false,
  'collectCoverageFrom': [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue'
  ],
  globals: 
    'vue-jest': 
      pug: 
        doctype: 'html'
      
    
  ,
  preset: '@vue/cli-plugin-unit-jest/presets/no-babel'

TestMessageDialog.spec.js

import 
  mount,
  createLocalVue
 from '@vue/test-utils'
import Vuetify from 'vuetify'
import MessageDialog from '@/components/common/MessageDialog.vue'

describe('MessageDialog.vue', () => 
  const sampleData = 
    titleText: 'title text with unique id : 2020.03.12.00'
  

  let wrappedMessageDialog

  beforeEach(() => 
    const vuetify = new Vuetify()
    const localVue = createLocalVue()

    wrappedMessageDialog = mount(
      MessageDialog,
      
        localVue,
        vuetify,
        propsData: sampleData
      
    )
  )

  it('renders correctly when passed props', () => 
    expect(
      wrappedMessageDialog
        .find( name: 'v-card-title' )
        .text()
    ).toMatch(sampleData.titleText)
  )
)

MessageDialog.vue

<template lang="pug">
v-dialog(v-model="isVisible" )
  v-card
    v-card-title  titleText 
</template>


<script>

export default 
  props: 
    titleText: 
      default: '',
      type: String
    
  

</script>

我收到以下错误

FAIL tests/unit/components/common/TestMessageDialog.spec.js
[vue-test-utils]: find did not return Component, cannot call text() on empty Wrapper

      31 |       wrappedMessageDialog
      32 |         .find( name: 'v-card-title' )
    > 33 |         .text()
         |          ^
      34 |     ).toMatch(sampleData.titleText)
      35 |   )
      36 | )

      at throwError (node_modules/@vue/test-utils/dist/vue-test-utils.js:1709:9)
      at ErrorWrapper.text (node_modules/@vue/test-utils/dist/vue-test-utils.js:8767:3)
      at Object.it (tests/unit/components/common/TestMessageDialog.spec.js:33:10)

  console.error node_modules/vue/dist/vue.common.dev.js:630
    [Vue warn]: Unknown custom element: <v-dialog> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    found in

    ---> <Anonymous>
           <Root>

<v-dialog>、<v-card> 和 <v-card-title> 的类似警告

【参考方案1】：

看起来您想要在 MessageDialog 组件中注册组件。例如。

<script>
import Foo from './Foo.vue;
...
export default 
  components:  Foo 
  ...

...
</script>

更多信息：https://vuejs.org/v2/guide/components-registration.html#Local-Registration

【讨论】：

要导入哪个组件？ v 对话框？它在源代码中工作，即我可以在没有该导入的情况下在应用程序的浏览器中看到对话框。我认为 vuetify 组件不需要像那样导入。

我明白了，您可能正在使用全局注册的组件。我个人更喜欢本地注册方式。但是，您可以继续使用全局注册 - 但您需要存根正在使用的组件，因为在组件单元测试中，vue 组件与主 vue 应用程序是隔离的。这可能会有所帮助：***.com/questions/52962489/…

现在是午夜，休息后我得去拿它。谢谢，但最初的尝试失败了...... mount 和 shallowMount 的行为相似。但我会再试一次。