개요

IstanbulJS - 보고서 개선 - 소스 코드 수정과제의 검증.
[email protected]사용된 TypeScript 환경에서 IstanbulJS 생성된 HTML 형식의 덮어쓰기 보고서에서 다음과 같은 문제가 발견되었기 때문에 원인과 해결 방안을 조사하는 동시에 수시로 업데이트됩니다.
🙅 함수의 정의 부분의 하이라이트가 되돌아오는 값의 유형에 덮어쓰지 않았습니다.
🙅 클래스 방법의 공공 키워드가 강조 표시됩니다.

조사

JSON 보고서에 소스 매핑이 없습니다.

TypeScript 환경에서 다음 절차에 따라 서비스 범위 보고서를 생성합니다.

Jest: 일부 프로그램을 호출합니다.

???: TypeScript 코드를 JavaScript에 덤프합니다.

Jest: 덤프된 JavaScript 코드에서 테스트를 실행하고 호출합니다IstanbulJS.

IstanbulJS: JSON 보고서이후 이 보고서를 임시 보고서로 기재합니다.

nyc: 임시 보고서의 원본 맵을 사용하여 원본 맵을 만들고 TypeScript 코드에 사용할 보고서를 생성합니다.

[email protected]그리고[email protected]에서 기술한 장면은 다음 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 둘레를 분석하도록 한다.원영사nyc가 없으면 원영사를 할 수 없기 때문에 고광선을 정확하게 할 수 없다.
임시 보고서에 원본 지도를 포함하면 해결 방안이 될 수 있다고 가정하고 조사를 계속한다.

재현

구성 파일 만들기 에서 nyc 사용된 임시 보고서의 저장 목적지와 원본 맵 후의 보고서의 출력 목적지가 같고 일 임시 보고서가 덮어쓰기 때문에 내용을 확인할 수 없습니다.컨텐트를 확인하기 위해 원본 매핑된 보고서의 출력 대상을 다른 디렉터리로 변경합니다.
.nycrc

{
    "reporter": [
        "text-summary",
        "json",
        "html"
    ],
    "report-dir": "./coverage-final",
    "temp-dir": "./coverage"
}

보고서를 다시 생성하고 임시 보고서를 확인하면 원본 지도가 포함되지 않은 것으로 판단됩니다 (아래 그림 왼쪽).다른 한편,[email protected]환경에서 임시 보고서에는 소스 맵이 포함되어 있습니다 (오른쪽).

ts-jest 없음

[email protected]의 환경에서 출력 원본 지도의 코드를 조사한 결과ts-jest의 아래 코드와 관련이 있음을 발견했다.
node_modules/ts-jest/dist/utils.js

    config.inlineSourceMap = true;

config.inlineSourceMap가 false인 경우 임시 보고서에는 소스 맵이 더 이상 포함되지 않습니다.따라서 가설ts-jest이 원지도를 생성했다.또한,[email protected]의 환경Babel7에 TypeScript 변압기가 지원되므로 ts-jest 존재하지 않습니다.

nyc 필요 없어요.

설치ts-jest를 하고 임시 보고서를 다시 생성할 때 원본 맵은 포함되지 않지만 문장 등 여러 범위가 정확하게 기록됩니다.보고서 형식 지정에서 구현된 다음 설정을 삭제하고 HTML 보고서 확인 내용을 출력할 때 기대하는 하이라이트를 실행합니다.
package.json

 "jest": {
    "coverageReporters": [
      "json"
    ]
  }

범위 변환

사용하지 않고nyc 예상 보고를 받을 수 있는 이유를 조사했다.다음은 임시 보고서를 작성하는 전단 코드입니다.
node_modules/jest-cli/build/reporters/coverage_reporter.js

      var _sourceMapStore$trans = _this._sourceMapStore.transformCoverage(
        _this._coverageMap
      );

      const map = _sourceMapStore$trans.map,
        sourceFinder = _sourceMapStore$trans.sourceFinder;

              (略)

        reporter.write(map, sourceFinder && {sourceFinder: sourceFinder});

reporter.write는 덮어쓰는 map 코드를 내부에 전달하고 임시 보고서를 작성하는 포장 함수입니다[email protected]의 환경에서는 map 내에 소스 맵 inputSourceMap 을 저장하는 객체를 포함하여 임시 보고서 이 에 기록합니다._this._sourceMapStore.transformCoverage는 덤프된 코드에 대해 JavaScript에 저장된 덮어쓰기_this._coverageMap를 원래 TypeScript 코드에 대한 덮어쓰기로 변환하는 함수입니다.
[email protected]의 환경에서 사용ts-jest의 경우 _this._coverageMap에 포함되어 예상된 보고를 받습니다.다른 한편, 사용inputSourceMap의 경우 Babel7를 포함하지 않아 예상한 보고를 받을 수 없다.따라서 덮어쓰기를 정확하게 변환하려면 inputSourceMap 이 필요하다고 생각합니다.

범위 변환(내부 코드)

다음은 상기inputSourceMap의 내부 코드입니다.
node_modules/istanbul-lib-source-maps/lib/map-store.js

MapStore.prototype.transformCoverage = function (coverageMap) {
            (略)

    if (Object.keys(this.data).length === 0) {
        return {
            map: coverageMap,
            sourceFinder: sourceFinder
        };
    }
    mappedCoverage = transformer.create(function (filePath) {

            (略)

    }).transform(coverageMap);

    return {
        map: mappedCoverage,
        sourceFinder: sourceFinder
    };
};

사용_this._sourceMapStore.transformCoverage의 경우 끝까지 처리ts-jest하고 변환된 정보를 되돌려줍니다.한편, 사용return의 경우 중간Babel7에서 변환 전의 정보를 되돌려줍니다.따라서 return의 유무는 커버 변환의 오류가 아니라 변환 자체의 유무와 관련이 있음을 알 수 있다.

원인

사용inputSourceMap을 통해 원본 지도를 포함하지 않는 덮어쓰기를 생성합니다.따라서 덮어쓰기를 형식 스크립트로 바꾸지 않고 형식 스크립트 코드에 대응하지 않는 보고서를 생성합니다.

해결 방법

[email protected]문서 레지스트리에 항목을 추가합니다.

React 항목 만들기

$ create-react-app fix_typescript --typescript
$ cd fix_typescript
$ yarn eject
$ yarn add -D ts-jest

package.json

scripts 추가

다음 설정을 추가합니다.
package.json

  "scripts": {
    "coverage": "rm -rf coverage && yarn test --coverage"
  }

jest.수정 변환

다음과 같이 설정을 수정합니다.
package.json

  "jest": {
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.tsx?$": "ts-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    }
  }

tsconfig.json

compilerOptions.태그 수정

es2015의 표기법을 사용하기 위해 다음과 같은 설정을 수정합니다.
tsconfig.json

"compilerOptions": {
    "target": "es2015"
  }

주변 파일 수정

IstanbulJS - 보고서 개선 - 소스 코드 수정 또는 IstanbulJS - 보고서 개선 ver.2 - 소스 코드 수정 주변 파일을 수정합니다.
🚨 # 가정에 기재된 절차를 생략합니다.

검증

수정된 후에 다시 생성된 보고서가 정의된 고광 규칙을 따르는지 검증합니다.여기에서 IstanbulJS - 보고서 개선 - 소스 코드 수정의 규칙으로 검증했다.

TypeScript - [email protected]템플릿 사용

👍 정의된 규칙에 따라 강조 표시됩니다.

총결산

주변 파일을 수정하기 전에 설치Babel7를 통해 정확한 서비스 범위 보고서를 생성했습니다.최종 처리 절차는 다음과 같다.

Jest: ts-jest 호출.tsx으로 파일을 전송합니다.

ts-jest: TypeScript 코드를 JavaScript에 덤프합니다.

Jest: 덤프된 JavaScript 코드에서 테스트를 수행하여 덮어쓰는 범위를 TypeScript 코드로 변환하고 호출ts-jest합니다.

IstanbulJS: HTML 보고서를 생성합니다.

원본 매핑 후 보고서의 출력 목적지는 기본적으로 사용됩니다 IstanbulJS.  ↩
[email protected]환경./coverage의 버전은 다르지만 Jest에게 전달reporter.write하는 점은 같다.  ↩