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

Posted 2023-02-22

【中文标题】如何避免在每个测试文件中导入组件所需的所有内容？

【英文标题】：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"]

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

【参考方案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'],