Vue-Jest 자동화 테스트 기초 설정 상세 설명
설치 하 다.
공식 적 으로 제공 하 는@vue/cli 를 통 해 Vue 항목 을 직접 만 들 고 Unit Testing 을 선택 할 수 있 습 니 다.
? Check the features needed for your project:
◉ Choose Vue version
◉ Babel
❯◉ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◯ CSS Pre-processors
◯ Linter / Formatter
◉ Unit Testing
◯ E2E Testing
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated con
fig files
module.exports = {
preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel'
}
이 설정 이 무엇 을 썼 는 지 먼저 보 세 요.@vue/cli-plugin-unit-jest/presets/typescript-and-babel 이 가방 을 찾 으 십시오.실제 출력 설정 은 다음 과 같 습 니 다.
module.exports = {
moduleFileExtensions: [ //
'js',
'jsx',
'json',
// tell Jest to handle *.vue files
'vue',
'ts',
'tsx'
],
transform: { //
// process *.vue files with vue-jest
'^.+\\.vue$': require.resolve('vue-jest'),
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
require.resolve('jest-transform-stub'),
'^.+\\.jsx?$': require.resolve('babel-jest'),
'^.+\\.tsx?$': require.resolve('ts-jest'),
},
transformIgnorePatterns: ['/node_modules/'], // node_modules
// support the same @ -> src alias mapping in source code
moduleNameMapper: { // @ src
'^@/(.*)$': '<rootDir>/src/$1'
},
testEnvironment: 'jest-environment-jsdom-fifteen',
// serializer for snapshots
snapshotSerializers: [ //
'jest-serializer-vue'
],
testMatch: [ //
'**/tests/unit/**/*.spec.[jt]s?(x)',
'**/__tests__/*.[jt]s?(x)'
],
// https://github.com/facebook/jest/issues/6766
testURL: 'http://localhost/',
watchPlugins: [
require.resolve('jest-watch-typeahead/filename'),
require.resolve('jest-watch-typeahead/testname')
],
globals: {
'ts-jest': {
babelConfig: true
}
}
}
SyntaxError:문법 이 잘못 되 었 습 니 다.다음 과 같은 힌트 가 있 기 때 문 일 수 있 습 니 다.
/Users/zhuangbing.cai/Documents/workspace/projects/wms-ui/node_modules/vue-runtime-helpers/dist/normalize-component.mjs:76
export default normalizeComponent;
^^^^^^
SyntaxError: Unexpected token 'export'
transform: {
'^.+\\.mjs$': 'babel-jest'
}
다른 문법 오류,nodemodule 에 있 는 일부 파일 은 전환 이 필요 하지만 transform Ignore Patterns 설정 에 의 해 무시 되 었 습 니 다.
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/zhuangbing.cai/Documents/workspace/projects/wms-ui/node_modules/vue-runtime-helpers/dist/normalize-component.mjs:76
export default normalizeComponent;
^^^^^^
SyntaxError: Unexpected token 'export'
transformIgnorePatterns: [
// node_modules， vue-runtime-helpers
'/node_modules/(?!(vue-runtime-helpers)/)',
],
Ts 형식 오류
TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
src/views/inventory-map/__tests__/available.spec.ts:15:1 - error TS2304: Cannot find name 'beforeEach'.
15 beforeEach(() => {
~~~~~~~~~~
src/views/inventory-map/__tests__/available.spec.ts:19:1 - error TS2593: Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha` and then add `jest` or `mocha` to the types field in your tsconfig.
19 describe('available-inventory-map', () => {
~~~~~~~~
src/views/inventory-map/__tests__/available.spec.ts:20:3 - error TS2593: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha` and then add `jest` or `mocha` to the types field in your tsconfig.
{
"compilerOptions": {
"types": [
"webpack-env",
"jest"
],
}
}테스트 용례 를 작성 하기 전에 Jest 는 구성 요소 인 스 턴 스 vm 와 렌 더 링 된 DOM 구 조 를 제공 해 야 합 니 다.코드 논리,페이지 효과 에 대한 이중 테스트 보장 은 어떻게 이 업무 구성 요 소 를 얻 습 니까?
구성 요 소 를 직접 인용 하면 안 됩 니 다.UI 구성 요소 라 이브 러 리,도구 함수,Vuex 상태 등 업무 구성 요소 에 대한 의존 도가 많 기 때문에 우선 이러한 의존 도 를 잘 처리 해 야 합 니 다.
처리 의존
먼저 테스트 할 이 업무 구성 요소 가 어떤 것 에 의존 하 는 지 알 아야 합 니 다.전체적인 의존 은 main.ts 또는 main.js 입구 파일 을 참조 하고 다른 것 은 구성 요소 의 참조 에 따라 판단 할 수 있 습 니 다.의존 이 생 긴 후 어떻게 Jest 에서 구성 요소 인 스 턴 스 를 얻 습 니까?
Vue 는 유닛 테스트 유 틸 리 티 라 이브 러 리-Vue Test Utils를 제공 합 니 다.테스트 사례 를 작성 할 때 사용 할 수 있 습 니 다.먼저 createLocalVue 를 이용 하여 전체 Vue 류 를 오염 시 키 지 않 고 구성 요 소 를 추가 하고 혼합 하 며 플러그 인 을 설치 할 수 있 는 Vue 클래스 를 만 들 고 이 어 참조 에 의존 합 니 다.
const _localVue = createLocalVue();
_localVue.use(Vuex);
_localVue.use(UI);
_localVue.use(i18nInstall);
_localVue.component('s-filter', SFilter);
_localVue.component('w-table', WTable);
_localVue.directive('xxx', {
inserted: (el, binding) => {
....
},
});
export const localVue = _localVue;
import enums from './enums';
export const systemStore = new Vuex.Store({
actions: {},
state: {
enums: {
systemEnums: enums,
},
},
});
localVue 와 store 를 얻 은 후에 우 리 는 그것 으로 결 과 를 만 들 고 mount 를 통 해 구성 요 소 를 렌 더 링 해 야 합 니 다.
import { localVue, systemStore } from '@/utils/unit-test/common';
import { mount } from '@vue/test-utils';
require('intersection-observer'); // jsdom IntersectionObserver
import TaskList from '../available-inventory-map/index.vue'; //
let store: any;
beforeEach(() => {
store = systemStore;
});
describe('available-inventory-map', () => {
it(' ', () => {
const renderer = createRenderer();
const wrapper = mount(TaskList, {
localVue,
store,
attachToDocument: true,
});
const html = wrapper.html(); // html
const vm = wrapper.vm; //
console.log(html, vm);
})
}
총결산
본 고 는 Vue+Ts 프로젝트 에서 Jest 자동화 테스트 를 설정 하 는 과정 에서 발생 하 는 문제 에 대한 정 리 를 소개 하고 기본 설정 과 자주 발생 하 는 오류 해결 방법,그리고 테스트 사례 를 작성 하기 전에 완전한 구성 요소 정보 와 DOM 을 얻 는 방법 을 소개 한다.다음 용례 를 위해 기 초 를 닦다.
인용 하 다.
Vue Test Utils
Vue-Jest 자동화 테스트 기초 설정 에 대한 자세 한 설명 은 여기 서 소개 되 었 습 니 다.Vue-Jest 자동화 테스트 에 관 한 더 많은 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
