브라우저에서 Vue Jest 테스트 디버깅

미래에서 수정:

자, 이 게시물은 jest-preview에 관한 것인데 꽤 멋집니다. 하지만 불행히도 현재는 @testing-library/vue에서만 작동합니다. 가장 간단한 구성 요소 이외의 것을 테스트할 때 거의 즉시 문제가 발생했습니다. 작업을 완료할 수 없었고 @vue/test-utils 로 되돌려야 했습니다.

문서화를 위해 이 게시물을 남겨두고 있지만 사람들이 피해야 할 경고로 남겨 두는 것도 똑같이 중요하다고 느꼈습니다testing-library.


다음은 Vue.js 구성 요소에서 Jest 테스트의 브라우저 기반 디버깅을 얻기 위해 내 저장소 중 하나에서 수행한 단계입니다. 특히 이것은 Vue-CLI로 생성된 Vue 3 저장소입니다.

이는 라이브러리jest-preview를 통해 가능합니다. 대규모 종합 코드베이스에서 아직 사용하지 않았기 때문에 접하지 못한 극단적인 경우가 있을 수 있지만 사용하면서 이 게시물을 업데이트하겠습니다.

npm install --save-dev @testing-library/vue concurrently jest-preview wait-on

npm uninstall @vue/test-utils

jest.config.js에 다음을 추가합니다.

setupFilesAfterEnv: ['<rootDir>/tests/unit/setup.js'],
transform: {
  '^.+\\.vue$': '@vue/vue3-jest',
  '^.+\\.css$': 'jest-preview/transforms/css',
  '^(?!.*\\.(js|css|json|vue)$)': 'jest-preview/transforms/file'
}

tests/unit/setup.js에서 다음과 같이 전역 CSS를 가져옵니다.

import '../../public/global.css';

import 'bootstrap/dist/bootstrap.min.css';

tests/unit/setup.js에 다음을 추가합니다.

import { jestPreviewConfigure } from 'jest-preview';

jestPreviewConfigure({ autoPreview: true });

테스트에서 다음을 변경합니다.

발신자: import { shallowMount } from '@vue/test-utils';

대상: import { render } from '@testing-library/vue';

테스트 변경:

발신자: const wrapper = shallowMount(MyComponent, options);

대상: const wrapper = render(MyComponent, options);

테스트 변경:

발신자: const validator = wrapper.vm.$options.props.whatever.validator;

대상: const validator = MyComponent.props.whatever.validator;

마지막으로 package.json에 다음 npm 스크립트를 추가합니다.

"jest": "concurrently \"jest-preview\" \"wait-on http://localhost:3336 && npm run unit\"",

npm run unit 부분을 jest를 실행하는 데 사용하는 스크립트로 변경합니다

.

도 npm run jest