Question

我是刚接触Vue的单元测试。

我从此处添加了插件单元测试：https://www.npmjs.com/package/@vue/cli-plugin-unit-jest

它创建了一个测试文件夹，其中另一个文件夹名为unit，在其中放置了2个文件：Footer.spec.js和Main.spec.js。它还创建了一个jest.config.js文件。

Footer.spec.js

import '../../src/plugins/fontawesome'
import { mount } from '@vue/test-utils'
import Footer from '../../src/components/Footer/Footer.vue'
import BootstrapVue from 'bootstrap-vue'
import { createLocalVue } from '@vue/test-utils'

describe('Footer', () => {
  const localVue = createLocalVue()
  localVue.use(BootstrapVue)
  const wrapper = mount(Footer, {localVue})

  it('has a FooterPhoneNumber', () => {
    expect(wrapper.html()).toContain('some HTML')
  })

  it('has a FooterEmail', () => {
    expect(wrapper.html()).toContain('some HTML')
  })
})

Main.spec.js

import '../../src/plugins/fontawesome'
import { mount } from '@vue/test-utils'
import Main from '../../src/components/Main.vue'
import BootstrapVueMain from 'bootstrap-vue'
import { createLocalVueMain } from '@vue/test-utils'

describe('Main', () => {
  const localVueMain = createLocalVueMain()
  localVueMain.use(BootstrapVueMain)
  const wrapper = mount(Main, {localVueMain})

  it('the modal for browser not compatible', () => {
    expect(wrapper.html()).toContain('some HTML')
  })
})

来自jest.config.js

 transformIgnorePatterns: [
   '/node_modules/(?!(bootstrap|bootstrap-vue)/)',
   '/node_modules/',
 ],

由于2次导入而出现错误：

     import 'bootstrap/dist/css/bootstrap.css'
     | ^
  18 | import 'bootstrap-vue/dist/bootstrap-vue.css'

Footer.spec.js通过了测试，但Main.spec.js没有通过。

关于如何修复它的任何建议？

Answer 1

在Main.spec.js中，您正在导入并使用createLocalVueMain()，而不是createLocalVue()。因此，BootstrapVue没有注册到localVue实例-因为它不是创建的。

导入引导程序错误：意外的令牌，测试实用程序，在一个测试中起作用，而在另一个测试中却没有

1 个答案: