How to avoid import everything that the component needs in each test file?

Question

In my jest tests, I need to import everything that the tested component needs to work (which I do in my application's main.js). Since I have multiple test files, I need to "re-import" it in each file. Is there a way to import it all in a single file, and then import only this file?

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', () => {});
});

I expect to import everything I need in a file, like helper.js

Then in my test file I'd just do something like

import 'test-helpers/helper';

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

---

EDIT 1

After a while I was able to import all I needed this way

/* 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'

And adding this line to my .babelrc (to be able to work with jest)

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

And then I could use all the properties I imported.
Although it's working this way, I wanted to use these properties (Component, mount...) without having to implicitly import each one.
Is there a way to do it?

Answer 1

1. create a separate js file
2. import components or plugins or anything you want there
3. import that file in main.js file

For example: this is my separate 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'
...

Now in app.js

import('path to reuseableComponets.js')

That's it.

Answer 2

Use setupFilesAfterEnv in your jest.config.js to point to a script that sets up your tests. This file would be automatically invoked before your tests, so you wouldn't have to import it.

For example, you could move the setup code you had mentioned into a file named my-setup.js, and then configure Jest as follows:

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