programing

각 테스트 파일에 컴포넌트가 필요한 모든 것을 Import하지 않도록 하려면 어떻게 해야 합니까?

prostudy 2022. 5. 29. 09:20
반응형

각 테스트 파일에 컴포넌트가 필요한 모든 것을 Import하지 않도록 하려면 어떻게 해야 합니까?

재치 테스트에서는 테스트된 컴포넌트가 동작하는 데 필요한 모든 것을 Import해야 합니다(애플리케이션에서 하고 있습니다).main.js테스트 파일이 여러 개 있기 때문에 각 파일에 다시 Import해야 합니다.모든 파일을 하나의 파일로 Import한 후 이 파일만 Import할 수 있는 방법이 있습니까?

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

필요한 모든 것을 파일에 Import 할 수 있습니다.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에 추가합니다(재밌게 작업할 수 있도록).

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

그러면 가져온 모든 자산을 사용할 수 있습니다.
이렇게 동작하지만 각각의 속성을 암묵적으로 Import할 필요 없이 이러한 속성(컴포넌트, 마운트...)을 사용하고 싶었습니다.
방법이 있을까요?

  1. 별도의 js 파일 생성
  2. 컴포넌트, 플러그인 또는 원하는 것을 Import합니다.
  3. 해당 파일을 main.disc 파일에 Import합니다.

예: 이것은 별도의 재사용 가능한 Componets.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')

바로 그겁니다.

에서 사용jest.config.js테스트를 설정하는 스크립트를 가리킵니다.이 파일은 테스트 전에 자동으로 호출되므로 가져올 필요가 없습니다.

예를 들어, 당신이 언급한 셋업 코드를my-setup.js다음으로 Jest를 다음과 같이 설정합니다.

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

언급URL : https://stackoverflow.com/questions/58663933/how-to-avoid-import-everything-that-the-component-needs-in-each-test-file

반응형