Jasmine 및 TypeScript를 사용한 단위 테스트
나는 컴파일하기 위해 자스민으로 타이프틱으로 유닛 테스트를 작성하려고 한다.다음과 같은 장치 테스트 파일을 사용하여 Refarper는 나에게 jasmine.d.ts에서 유형을 가져올 수 있는 링크를 요청한다.
/// <reference path="sut.ts" />
/// <reference path="../../../scripts/typings/jasmine/jasmine.d.ts" />
describe("Person FullName", function () {
var person;
BeforeEach(function () {
person = new Person();
person.setFirstName("Joe");
person.setLastName("Smith");
});
It("should concatenate first and last names", function () {
Expect(person.getFullName()).toBe("Joe, Smith");
});
});
그래서 나는 링크를 클릭해서 다음과 같이 끝맺는다(실제로 서술함수의 앞에 "Jasmine"을 붙였을 뿐이다). 그래서 나는 수동으로 다른 Jasmine 통화에 접두사를 붙였다.
/// <reference path="sut.ts" />
/// <reference path="../../../scripts/typings/jasmine/jasmine.d.ts" />
import Jasmine = require("../../../Scripts/typings/jasmine/jasmine");
Jasmine.describe("Person FullName", function () {
var person;
Jasmine.BeforeEach(function () {
person = new Person();
person.setFirstName("Joe");
person.setLastName("Smith");
});
Jasmine.It("should concatenate first and last names", function () {
Jasmine.Expect(person.getFullName()).toBe("Joe, Smith");
});
});
그러나 가져오기 문에는 빨간색 스퀴글리 라인에 "외부 모듈을 확인할 수 없음 ..//../스크립트/표준/자스민/자스민/자스민" 오류 메시지가 표시된다.모듈을 비모듈 유형에 앨리어싱할 수 없음"
무엇이 이 오류를 야기하는지 아십니까?내 프로젝트 빌드 설정에서 "모듈 시스템" 옵션이 AMD로 설정되어 있는지 확인했어.나는 또한 재스민 모듈이 재스민.d.ts로 정의되어 있다는 것도 확인했다.이 파일을 다운로드한 것은 확실하다.사이트 입력.
declare module jasmine {
...
}
여기 (내 생각에) 시험하는 가장 좋은 방법이 있다.ts-node
2018년 기준 앱:
npm install --save-dev typescript jasmine @types/jasmine ts-node
인package.json
:
{
"scripts": {
"test": "ts-node node_modules/jasmine/bin/jasmine"
}
}
인jasmine.json
파일 형식을 다음으로 변경*.ts
"spec_files": ["**/*[sS]pec.ts"],
사양 파일에서:
import "jasmine";
import something from "../src/something";
describe("something", () => {
it("should work", () => {
expect(something.works()).toBe(true);
});
});
테스트를 실행하려면:
npm test
이렇게 하면 의 로컬 설치 버전이ts-node
그리고jasmine
로컬 버전에서는 모든 사용자가 동일한 버전을 사용하고 있다는 것을 확인할 수 있기 때문에 전역으로 설치된 버전을 사용하는 것보다 더 낫다.
참고: 노드 앱 대신 웹 앱을 사용하는 경우, 재스민 CLI 대신 카르마를 사용하여 테스트를 실행하십시오.
이것을 형식 지정 파일의 맨 위에 두십시오.
/// <reference path="../../node_modules/@types/jasmine/index.d.ts" />
let Jasmine = require('jasmine');
작동하려면 다음과 같은 Jasmine 모듈을 설치해야 한다.
$ npm install jasmine-core jasmine @types/jasmine @ert78gb/jasmine-ts --save-dev
그렇게 하면 IDE(WebStorm 등)는 재스민 및 설명(), it(), 기대() 등의 기능을 인식하게 된다.그러니 그들에게 "자스민"이라는 접두사를 붙일 필요는 없다.또한 명령줄에서 재스민-ts 모듈을 사용하여 사양 파일을 실행할 수 있다.다음 명령줄 도구를 전체적으로 설치하십시오.
$ npm install -g jasmine @ert78gb/jasmine-ts
그런 다음 Jasmine이 구성 파일을 찾을 수 있도록 "Jasmine" 명령줄 모듈을 구성하십시오.그러면 당신은 재스민-t를 실행할 수 있어야 하고 당신의 사양 파일은 명령행에서 잘 실행되어야 한다.
./node_modules/.bin/jasmine-ts src/something.spec.ts
..그리고, IDE도, 디버그 실행도 그런 식으로 작동해야 한다(나에겐 효과가 있다)구성할 수 있고 실행되도록 그렇게.
이렇게 시험을 작성하면, 업보 없이 서버 측에서 재스민 테스트 스펙을 실행하거나, 업보를 사용하여 웹 브라우저에서 실행할 수 있다.동일한 형식 코드.
가져오기에 문제가 있는 경우 다음을 사용하십시오.tsconfig-paths
npm i ts-node tsconfig-paths types/jasmine jasmine --save-dev
유형자스민 실행:
ts-node -r tsconfig-paths/register node_modules/jasmine/bin/jasmine.js
재스민이 .ts 파일을 검색하는지 확인하십시오.
"spec_files": [
"**/*[sS]pec.ts"
],
"helpers": [
"helpers/**/*.ts"
],
대본을 테스트하기 위해 프로젝트에 사용할 경우 폴리필이 필요할 수도 있다.다음과 같이 필요한 가져오기가 있는 도우미 파일 만들기helpers/global/polifill.ts
import 'core-js';
나를 위해 나는 다음과 같이 했다.
타이핑 설치
npm install typings --global
그리고 나서 자스민에 대한 오타를 추가해라.
typings install dt~jasmine --save --global
당신은 단지 부작용만 가져올 수 있다.@types/jasmine
선언 및 재스민 기능을 글로벌 범위에 배치하여 각 통화에 접두사를 붙일 필요가 없음jasmine.
기존 유닛 테스트에서 빠른 포트를 허용하고 여전히 웹 팩과 잘 작동한다.
// tslint:disable-next-line:no-import-side-effect
import "jasmine";
describe("My Unit Test", () => { /* ... */ } );
물론 당신은 여전히 자스민과 타이핑을 설치해야 한다.
$ npm i jasmine @types/jasmine --save-dev
그러나 ts나 노드에 특화된 재스민 로더는 필요하지 않다.컴파일된 js 파일에 대해 jasmine을 실행하십시오.
$ node ./node_modules/jasmine/bin/jasmine.js --config=test/support/jasmine.json
형식 지정 파일이 "테스트" 하위 디렉토리 컴파일 내에 있다고 가정하여bin/test
그리고 너는test/support/jasmine.json
다음과 같은 방법으로:
{
"spec_dir": "bin/test",
"spec_files": [
"**/*[sS]pec.js"
],
"stopSpecOnExpectationFailure": false,
"random": false
}
P.S. 위의 모든 것은 윈도우에서도 작동한다.
Jasmine html 파일에 포함...
<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/jasmine.js"></script>
...또는 npm 재스민 패키지 설치:
npm install --save-dev jasmine
두 번째 방법(모듈로 사용)을 사용할 때는 다음을 가져와야 한다.
var jasmine = require('jasmine');
또는
import jasmine from 'jasmine';
그런 다음 다른 코드를 변경하십시오.
jasmine.describe("Person FullName", function () {
var person;
jasmine.beforeEach(function () {
person = new Person();
person.setFirstName("Joe");
person.setLastName("Smith");
});
jasmine.it("should concatenate first and last names", function () {
jasmine.expect(person.getFullName()).toBe("Joe, Smith");
});
});
개인적으로 나는 자스민 npm 모듈을 사용하지 않고 첫 번째 방법을 선호한다. (아직 모듈을 테스트하지 않았다)
당신은 이것을 요구하지 않았지만, 보너스 포인트: 일단 AJ의 해답을 얻으면 (사용)ts-node
Jasmine 시작 스크립트)를 호출하려면 새 태스크를 추가하십시오.
"scripts": {
"watch": "ts-node-dev --respawn -- ./node_modules/jasmine/bin/jasmine src/**.spec.ts"
}
물론, 원한다면, 대신 Jasmine의 구성 파일을 사용하여 사양이나 다른 주장을 전달할 수 있다.자스민이 네 모든 사양을 한 번 검사해봐ts-node-dev
뒷자리에 앉아 당신의 시험이나 그들이 가지고 있는 어떤 것이든 기다릴 것이다.require
'바꿔야 할 d, 어느 시점에'jasmine
다시 운영될 것이다.나는 아직 변경된 테스트(또는 수입이 변경된 테스트)만 실행할 수 있는 방법을 생각해내지 못했다. 내가 알기로는 그것은 어쨌든 지원되지 않는다.
내 폴더 구조
사양 폴더가 프로젝트의 루트에 있음
spec
\- dist // compiled tests
\- helpers // files modified testing env
\- ts-console.ts // pretty prints of results
\- support
\- jasmine.json
\- YourTestHere.spec.ts
\- tsconfig.json // tsconfig for your tests
파일 내용
ts-ts.ts.
const TSConsoleReporter = require("jasmine-console-reporter");
jasmine.getEnv().clearReporters();
jasmine.getEnv().addReporter(new TSConsoleReporter());
쟈스민.json
{
"spec_dir": "spec/dist",
"spec_files": [
"**/*[sS]pec.js"
],
"helpers": [
"spec/helpers/**/*.js"
],
"stopSpecOnExpectationFailure": false,
"random": true
}
패키지에 추가 스크립트 포함.json
"scripts": {
"test": "rm -rf ./spec/dist && tsc -p ./spec && jasmine"
}
및 .gitignore에 "/spec/properties" 행을 추가하십시오.
검사해 봐!
스와 하십시오.npm test
.
어떻게 되는 겁니까?
- 테스트용 디렉터리가 치료된다.
- 테스트는 폴더를 JS에 지정/디스트하기 위해 컴파일된다.
- 테스트는 이 위치에서 실행된다.
나는 그것이 너에게 도움이 되기를 바란다.코딩 좋네.
참조URL: https://stackoverflow.com/questions/30863565/unit-testing-using-jasmine-and-typescript
'IT이야기' 카테고리의 다른 글
Redex 동적 데이터 소스와 상호 작용 (0) | 2022.03.12 |
---|---|
대용량 텍스트 파일을 메모리에 로드하지 않고 한 줄씩 읽는 방법 (0) | 2022.03.12 |
use효과 트리거링 안 함 (0) | 2022.03.12 |
Vue/Vuetify - 알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록하셨습니까? (0) | 2022.03.12 |
각도2에서 확인란을 선택할 때 이벤트 시작 (0) | 2022.03.12 |