IT이야기

Jasmine 및 TypeScript를 사용한 단위 테스트

cyworld 2022. 3. 12. 10:23
반응형

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-node2018년 기준 앱:

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-nodeJasmine 시작 스크립트)를 호출하려면 새 태스크를 추가하십시오.

"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.

어떻게 되는 겁니까?

  1. 테스트용 디렉터리가 치료된다.
  2. 테스트는 폴더를 JS에 지정/디스트하기 위해 컴파일된다.
  3. 테스트는 이 위치에서 실행된다.

나는 그것이 너에게 도움이 되기를 바란다.코딩 좋네.

참조URL: https://stackoverflow.com/questions/30863565/unit-testing-using-jasmine-and-typescript

반응형