如何避免在每个测试文件中导入组件所需的所有内容？答案

【问题标题】：How to avoid import everything that the component needs in each test file?如何避免在每个测试文件中导入组件所需的所有内容？
【发布时间】：2020-02-28 00:41:06
【问题描述】：

在我的笑话测试中，我需要导入被测试组件需要工作的所有内容（我在我的应用程序的main.js 中执行此操作）。由于我有多个测试文件，我需要在每个文件中“重新导入”它。有没有办法将它全部导入一个文件，然后只导入这个文件？

import Component from '@/views/input-something'
import {mount, shallowMount} from '@vue/test-utils'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import {library} from '@fortawesome/fontawesome-svg-core'
import {fas} from '@fortawesome/free-solid-svg-icons'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'bootstrap/dist/css/bootstrap.css'
import BootstrapVue from 'bootstrap-vue'
import 'vue-select/dist/vue-select.css'
import Vuelidate from 'vuelidate'
import Vue from 'vue'
import './helpers/multi-ref-test-runner'

Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.use(BootstrapVue)
Vue.use(Vuelidate)
library.add(fas)

// I wish to write everything above in a single file

window.confirm = function() { return false; }

describe('input-something', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = mount(Component, {...});
  });

  it('it renders', () => {});
});

我希望在一个文件中导入我需要的所有内容，例如 helper.js

然后在我的测试文件中我会做类似的事情

import 'test-helpers/helper';

describe('input-something', () => {...})

编辑 1

一段时间后，我能够以这种方式导入所有我需要的东西

/* imports.js */
import Component from '@/components/something'
import { mount } from '@vue/test-utils'

export { Component, mount }

/* my-test.js */
import { Component, mount } from './imports.js'

并将这一行添加到我的 .babelrc 中（以便能够使用 jest）

"plugins": ["@babel/plugin-syntax-dynamic-import"]

然后我可以使用我导入的所有属性。
虽然它是以这种方式工作的，但我想使用这些属性（组件、挂载...）而不必隐式导入每个属性。
有办法吗？

【问题讨论】：

标签： javascript vue.js vuejs2 jestjs

【解决方案1】：

创建一个单独的js文件
在那里导入组件或插件或任何你想要的东西
将该文件导入 main.js 文件中

例如：这是我单独的 reuseableComponets.js

// I include components and plugins here
...
import Component from '@/views/input-something'
import {mount, shallowMount} from '@vue/test-utils'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
...

现在在 app.js 中

import('path to reuseableComponets.js')

就是这样。

【讨论】：

这样做，我得到这个错误：SyntaxError: /home/cassio/projects/forms-frontend/src/main.js: Support for the experimental syntax 'dynamicImport' isn't currently enabled (1:1): > 1 | import ('./test-imports')
尝试使用require('...') 导入该文件
使用import '...' 或require('...') 我收到未定义变量的错误。我也尝试过使用module.exports = {...} 和export default {...}，但没有成功。

【解决方案2】：

在jest.config.js 中使用setupFilesAfterEnv 来指向设置测试的脚本。该文件将在您的测试之前自动调用，因此您不必导入它。

例如，您可以将您提到的设置代码移动到名为my-setup.js 的文件中，然后按如下方式配置 Jest：

// jest.config.js
module.exports = {
  setupFilesAfterEnv: ['./my-setup.js'],
}

【讨论】：