E2E 테스트에 NestJS CLI GraphQL 플러그인 사용

Jay는 NestJS 핵심 팀의 구성원으로 주로 Discord 및 Github에서 커뮤니티를 돕고 프레임워크의 다양한 부분에 기여합니다.

GraphQL에 NestJS을 사용하고 있다면 GraphQL 메타데이터로 모든 DTO에 자동 주석을 추가하는 sweet @nestjs/cli 플러그인에 대해 알고 있을 것입니다. 즉, 코드를 줄이고 개발 주기를 더 빠르게 만들 수 있습니다. 솔직히, 누가 그것을 원하지 않습니까?). 그래서 당신은 멋진 플러그인을 사용하여 코드를 작성했고, 단위 테스트는 통과했고, e2e 테스트를 실행했지만 모든 것이 실패했습니다. 메타데이터 누락에 대한 GraphQL 오류, 실패에 대한 농담, 세상의 모든 것이 이제 매우 잘못되었습니다. 왜 이런 일이 발생했으며 어떻게 고칠 수 있습니까?

왜 이런 일이 일어났습니까?

그 이유를 이해하려면 Nestbuild의 모든 명령이 무엇을 하고 어떻게 작동하는지 매우 높은 수준에서 파악해야 합니다. 다음은 build 명령이 담당하는 간단한 목록입니다.

ts에서 js로 코드 컴파일

경로를 적절하게 매핑합니다(경로 별칭을 사용하는 경우).

swagger 데코레이터로 DTO에 주석 달기(적용되는 경우)

GraphQL 데코레이터로 DTO에 주석을 답니다(적용되는 경우).

변경 시 다시 컴파일하도록 자동 감시자를 설정합니다(start --watch를 사용하는 경우).

이제 이 모든 것이 표준 Typescript 컴파일러와 비교할 때 정말 좋아 보입니다. 사실, Nest는 기본적으로 내부에서 Typescript 컴파일러를 사용합니다(원하는 경우 Webpack으로 교체할 수 있지만). 여기서 주목해야 할 중요한 것은 이것이 기본적으로 tsc 하는 것 이상이라는 것입니다. 이 모든 것 때문에 ts-jest 을 통해 e2e 테스트를 실행하려고 할 때 기본 tsc 컴파일러만으로는 충분하지 않습니다.

알겠습니다. 어떻게 수정합니까?

내가 볼 때 두 가지 주요 옵션이 있습니다.

1) ts-jest로 교체할 수 있는 typescript 컴파일러 플러그인을 만듭니다.
2) e2e 테스트를 위해 특별히 테스트 파일을 빌드하는 프로세스를 만듭니다.

첫 번째 옵션은 훌륭하게 들리지만 몇 가지 문제가 있습니다. ts-jest에만 해당하므로 누군가 mocha와 같은 것을 사용하려면 완전히 새로운 플러그인을 작성해야 하고 작성하기 어렵습니다. Nest의 빌드 명령은 완전히 새로운 것이 아니라 tsc 의 랩 어라운드이기 때문입니다. 먼저 컴파일러.

그래서 우리는 옵션 2로 가서 e2e 테스트를 위한 빌드 프로세스를 작성합니다.

빌드 프로세스

이제 가장 먼저 필요한 것은 새로운 것tsconfig이므로 소스 코드와 테스트 코드를 모두 포함하도록 빌드를 얻을 수 있습니다. 따라서 nest new 프로젝트의 표준 설정을 사용하여 다음과 같은 tsconfig.test.json를 만들 수 있습니다.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "dist-test"
  },
  "include": ["src", "test"]
}

이것은 nest build 디렉터리와 src 디렉터리를 모두 포함하도록 test 테스트하고 일반 빌드 프로세스와 다른 출력 디렉터리를 사용합니다.

hint: you should probably add the dist-test dir to your .gitignore so it isn't checked into version control

이제 Nest가 제공하는 jest-e2e.json를 업데이트해야 합니다. transform 속성을 제거하고 테스트를 찾는 데 사용되는 정규식을 변경해야 합니다. 새jest-e2e.json는 다음과 같아야 합니다.

{
  "moduleFileExtensions": ["js", "json", "ts"],
  "rootDir": ".",
  "testEnvironment": "node",
  "testRegex": ".e2e-spec.js$"
}

이제 마지막으로 할 일은 빌드 스크립트와 테스트 스크립트를 작성하여 테스트로 전체 소스 코드를 빌드하고 테스트를 위해 모두 단일 디렉토리로 이동하는 것입니다. 여기에서 pre 스크립트를 사용하고 다음과 같이 package.json에서 두 개의 새 스크립트를 만들 수 있습니다.

"pretest:e2e": "nest build -p tsconfig.test.json && cp ./test/jest-e2e.json ./dist-test/test/",
"test:e2e": "jest --config ./dist-test/test/jest-e2e.json"

이 명령을 사용하면 npm run test:e2e 또는 yarn test:e2e 를 실행할 때 우리가 만든 새 tsconfig.test.json를 사용하여 프로젝트를 빌드하고 jest-e2e.json를 ./dist-test/test/ 디렉토리로 이동하여 위치와 유사하게 작동하도록 nest에 지시합니다. 이미 ./test/ dir(Typescript는 기본적으로 비 ts 파일을 이동하지 않음)에 있고 jest (ts-jest 아님)에 대해 구성 파일을 기반으로 테스트를 실행합니다.

실행 중인 버전을 보려면you can view my sample repository here .

질문이나 의견이 있으면 알려주세요. 그리고 일반적으로 NestJS에 대해 더 자세히 논의하고 싶다면feel free to check out our Discord .