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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7416
15
1359
52
76
11
26
19
vue2와 vue3의 라이프사이클 실행 순서의 차이점은 무엇입니까?
May 16, 2023 pm 09:40 PM
vue2와 vue3의 라이프사이클 실행 순서 차이 라이프사이클 비교 vue2의 실행 순서 beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyed vue3의 실행 순서 setup=>onBeforeMount= >onMounted=> onBeforeUpdate=>onUpdated=>onBeforeUnmount=&g
Python+Flask를 사용하여 웹 페이지의 실시간 업데이트 및 로그 표시를 구현하는 방법
May 17, 2023 am 11:07 AM
1. 모듈을 사용하여 파일에 로그 출력: 로깅은 사용자 정의 수준 로그를 생성하고 지정된 경로에 로그를 출력할 수 있습니다. 로그 수준: 디버그(디버그 로그) = 5) {clearTimeout(시간) // 한 번에 모두 10번 획득한 경우 행이 비어 있음 로그 지우기 예약 작업}return}if(data.log_type==2){//(i=0;i에 대해 새 로그를 얻은 경우)
Nginx 웹 서버 캐디를 사용하는 방법
May 30, 2023 pm 12:19 PM
Caddy 소개 Caddy는 현재 Github에 38,000개 이상의 별이 있는 강력하고 확장성이 뛰어난 웹 서버입니다. Caddy는 Go 언어로 작성되었으며 정적 리소스 호스팅 및 역방향 프록시에 사용할 수 있습니다. Caddy에는 다음과 같은 주요 기능이 있습니다. Nginx의 복잡한 구성에 비해 원래 Caddyfile 구성은 매우 간단합니다. 기본적으로 자동화된 HTTPS 구성을 지원하고 HTTPS 인증서를 자동으로 적용할 수 있습니다. 수만 개의 사이트를 Go 언어로 작성하여 어디서나 실행할 수 있으며 메모리 안전성이 더욱 보장됩니다. 우선 CentO에 직접 설치해보겠습니다.
웹상의 얼굴 차단 공격에 대한 실시간 보호(머신러닝 기반)
Jun 10, 2023 pm 01:03 PM
얼굴 차단 사격은 영상 속 인물을 가리지 않고 다수의 사격이 떠다니는 것처럼 보이도록 하여 마치 인물 뒤에서 떠다니는 것처럼 보이게 하는 것을 의미합니다. 기계 학습은 몇 년 동안 널리 사용되었지만 많은 사람들은 이러한 기능을 브라우저에서도 실행할 수 있다는 사실을 모릅니다. 이 기사에서는 기사 마지막 부분에 적용 가능한 몇 가지 시나리오를 소개합니다. 이 솔루션을 통해 몇 가지 아이디어를 얻을 수 있기를 바랍니다. mediapipeDemo(https://google.github.io/mediapipe/)는 주류 얼굴 차단 공세 주문형 업로드의 구현 원리를 보여줍니다. 비디오 서버 백그라운드 계산은 비디오 화면의 세로 영역을 추출하고 이를 svg로 변환합니다. 클라이언트가 비디오를 재생하는 동안 서버에서 svg를 다운로드하고 사격, 초상화와 결합합니다.
frps 서버와 웹이 포트 80을 공유하도록 nginx를 구성하는 방법
Jun 03, 2023 am 08:19 AM
우선, frp가 무엇인지에 대해 의문이 생길 것입니다. 간단히 말해서, frp는 인트라넷 침투 도구입니다. 클라이언트를 구성한 후 서버를 통해 인트라넷에 액세스할 수 있습니다. 이제 내 서버는 nginx를 웹 사이트로 사용했으며 포트 80은 하나만 있습니다. FRP 서버도 포트 80을 사용하려면 어떻게 해야 합니까? 쿼리 후에는 nginx의 역방향 프록시를 사용하여 이를 수행할 수 있습니다. 추가하려면: frps는 서버이고 frpc는 클라이언트입니다. 1단계: 서버에서 nginx.conf 구성 파일을 수정하고 nginx.conf의 http{}에 다음 매개변수를 추가합니다. server{listen80
Java API 개발에서 웹 서버 처리를 위해 Jetty7 사용
Jun 18, 2023 am 10:42 AM
JavaAPI 개발에서 웹 서버 처리를 위해 Jetty7 사용 인터넷의 발전과 함께 웹 서버는 애플리케이션 개발의 핵심 부분이 되었으며 많은 기업의 초점이기도 합니다. 증가하는 비즈니스 요구를 충족하기 위해 많은 개발자가 웹 서버 개발에 Jetty를 사용하기로 선택했으며 그 유연성과 확장성은 널리 인정받고 있습니다. 이 기사에서는 We 용 JavaAPI 개발에서 Jetty7을 사용하는 방법을 소개합니다.
Golang을 사용하여 웹 애플리케이션에 대한 양식 유효성 검사를 구현하는 방법
Jun 24, 2023 am 09:08 AM
양식 유효성 검사는 웹 애플리케이션 개발에서 매우 중요한 링크로, 애플리케이션의 보안 취약성과 데이터 오류를 방지하기 위해 양식 데이터를 제출하기 전에 데이터의 유효성을 확인할 수 있습니다. Golang을 사용하여 웹 애플리케이션에 대한 양식 유효성 검사를 쉽게 구현할 수 있습니다. 이 기사에서는 Golang을 사용하여 웹 애플리케이션에 대한 양식 유효성 검사를 구현하는 방법을 소개합니다. 1. 폼 유효성 검사의 기본 요소 폼 유효성 검사를 구현하는 방법을 소개하기 전에 먼저 폼 유효성 검사의 기본 요소가 무엇인지 알아야 합니다. 양식 요소: 양식 요소는
웹 개발에서 PHP는 프런트엔드인가요, 백엔드인가요?
Mar 24, 2024 pm 02:18 PM
PHP는 웹 개발의 백엔드에 속합니다. PHP는 주로 서버 측 로직을 처리하고 동적 웹 콘텐츠를 생성하는 데 사용되는 서버 측 스크립팅 언어입니다. 프런트엔드 기술과 비교하여 PHP는 데이터베이스와의 상호 작용, 사용자 요청 처리, 페이지 콘텐츠 생성과 같은 백엔드 작업에 더 많이 사용됩니다. 다음으로, 백엔드 개발에서 PHP 적용을 설명하기 위해 특정 코드 예제가 사용됩니다. 먼저 데이터베이스에 연결하고 데이터를 쿼리하기 위한 간단한 PHP 코드 예제를 살펴보겠습니다.
