karma+mocha+webpack3을 사용하여 vue2 단위 테스트 환경을 구축하는 단계에 대한 자세한 설명

이번에는 karma+mocha+webpack3을 사용하여 vue2단위 테스트환경을 구축하는 단계에 대해 자세히 설명하겠습니다. karma+mocha+webpack3을 사용하여 vue2 단위 테스트 환경을 구축할 때 주의사항은 무엇입니까? 다음은 실제 사례인데, 한 번 살펴보겠습니다.

인터넷에서 단위 테스트에 대한 많은 예제를 찾았습니다. 모두 새 프로젝트를 만들 때 단위 테스트를 추가하는 방법에 관한 것이지만 내 프로젝트가 생성되어 다시 할 수 없습니다. 이번에는 어떻게 추가해야 할까요? 단위 테스트에서 많은 어려움을 겪었습니다. 여기에 제 경험을 적어보겠습니다.

1. vue-cli를 사용하여 새 프로젝트를 생성하고 단위 테스트에 필요한 파일을 프로젝트에 직접 복사합니다

vue init webpack vuetest

파일 다운로드소스 코드 Github 링크

2를 설치합니다. 이 모듈에는 많은 종속성이 있습니다. 함정에 빠졌고 오랫동안 문제를 해결한 후 특정 모듈이 누락되었음을 발견했습니다. 여기에 필요한 모든 모듈을 나열하세요

npm i -D karma karma-webpack phantomjs-prebuilt karma-phantomjs-launcher karma-phantomjs-shim karma-chrome-launcher karma-sourcemap-loader mocha karma-mocha sinon chai sinon-chai karma-sinon-chai karma-spec-reporter karma-coverage istanbul-instrumenter-loader

3. package.json을 수정하고 스크립트에 시작 코드를 추가하세요. 유닛이 있으면 교체하세요)

"unit": "karma start test/unit/karma.conf.js --single-run",

4. 테스트 디렉터리에 있는 index.js 파일을 수정하세요. 이것이 제가 겪은 가장 큰 함정입니다. 해결하는 데 시간이 오래 걸렸지만 항상 오류가 발생했습니다. .scss 파일에 해결책이 있습니다.

const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)

가

const srcContext = require.context('../../src', true, /^\.\/(style$) /)

5로 변경되었습니다. 아래와 같이 테스트용으로 vue-cli에서 생성한 프로젝트 파일을 복사하고 routing을 구성하여 단위 테스트 모듈이 성공적으로 설치되었는지 테스트할 수 있습니다

6 프로젝트에서 다음 명령을 실행하여 단위 테스트

 npm run unit

를 시작하고 test/unit/coverage에 테스트 보고서를 생성합니다. 위는 간단한 vue 단위 테스트 예제입니다. 마지막으로 소스 코드를 제시합니다

참조 문서에 대한 심층 연구

Vue.js 학습 시리즈 6 - Vue 단위 테스트 Karma+Mocha 학습 노트

karma+webpack은 Vue 단위 테스트 환경을 구축합니다

karma+ mocha+webpack3은 vue2 유닛 테스트 환경을 구축합니다

저자의 관련 Vue 기사

Vue2.0을 기반으로 백그라운드 시스템 권한 제어 구현

[vue2.0 기반 elementui 스키닝 [사용자 정의 테마]](https:// juejin.im/post/5aea98 ...

Vue 국제화 처리 vue-i18n 및 중국어와 영어 간 프로젝트 자동 전환

이 기사의 사례를 읽으신 후 방법을 마스터했다고 믿습니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 관련 기사를 읽어보세요.

추천 도서:

React에서 선택한 li를 강조 표시하는 단계에 대한 자세한 설명

프런트 엔드의 정렬 알고리즘 예제에 대한 자세한 설명

위 내용은 karma+mocha+webpack3을 사용하여 vue2 단위 테스트 환경을 구축하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!