Jest로 TypeScript Express API를 테스트하는 방법(나 같은 입문자용)

독서를 좋아하지 않습니까? 코드만 보고 싶으세요? 다음은 github repo입니다 :)

열리는

새로운 TypeScript Express API를 테스트하려고 머리를 긁적이셨다면 제가 거기에 있었습니다. 그리고 시간을 절약하고 싶습니다.

TypeScript를 사용하기 위해 Node 및 Express API를 변환하려고 노력했습니다. 모든 것이 순조롭게 진행되다가 테스트를 받고 이 모든 실존적 질문을 갖기 시작했습니다. do I need to 'build' my test files? , do my config files need to be 'built'? 및 why did i decide to use TypeScript when my API already worked!? 와 같습니다.

이 기사에서는 그러한 질문 중 일부에 답할 수 있습니다. 또한 프로젝트에서 사용하는 기술( TypeScript , Node , Express , SuperTest 및 Jest )에 대해 약간 알고 있다고 가정합니다. 이는 심층적인 가이드라기보다는 프로젝트 구조 가이드에 가깝습니다. 사용된 기술을 살펴보십시오.

프로젝트 초기화 및 가져오기 가져오기

프로젝트에 대한 디렉토리를 만들고 그 안에 cd 넣습니다.

NPM을 사용하여 프로젝트npm init -y를 초기화합니다.

종속성 가져오기npm i express .

개발 종속성 가져오기npm i --save-dev typescript supertest nodemon jest ts-jest ts-node @types/jest @types/supertest @types/express .

TypeScript 초기화

이제 프로젝트에 TypeScript를 추가해 보겠습니다.npx tsc --init위의 명령은 tsconfig.json 파일을 생성합니다.

아래에서 수정하고 싶을 것입니다. 모든 항목이 필요한 것은 아니므로 필요에 맞게 추가 구성할 수 있습니다.exclude 값에 대한 빠른 참고 사항은 빌드에서 무시할 파일입니다. 아직 모두 존재하지는 않습니다 ;)

{
  "exclude": ["./coverage", "./dist", "__tests__", "jest.config.js"],
  "ts-node": {
    "transpileOnly": true,
    "files": true
  },
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "rootDir": "./src",
    "moduleResolution": "node",
    "checkJs": true,
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "skipLibCheck": true
  }
}

Jest 초기화

다음으로 Jest 테스트 프레임워크를 프로젝트에 추가하려고 합니다.npx ts-jest config:init위의 명령은 jest.config.js 파일을 생성합니다. 아래와 같이 수정하면 ts-jest와 함께 작동합니다(Jest가 TypeScript와 작동하게 만드는 것입니다).

module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
};

TypeScript로 기본 Express 앱 만들기

src 및 app.ts 두 개의 TypeScript 파일이 있는 server.ts 디렉토리를 만들어야 합니다. src 디렉토리에 routes라는 다른 디렉토리를 추가하려고 합니다. routes 디렉토리에서 user.routes.ts 파일을 추가하려고 합니다.

app.ts

import express, { Application, Request, Response, NextFunction } from "express";

import { router as userRoutes } from "./routes/user.routes";

const app: Application = express();

app.use("/users", userRoutes);

app.use("/", (req: Request, res: Response, next: NextFunction): void => {
  res.json({ message: "Allo! Catch-all route." });
});

export default app;

server.ts

import app from "./app";

const PORT: Number = 5050;

app.listen(PORT, (): void => console.log(`running on port ${PORT}`));

user.routes.ts

import { Router, Request, Response } from "express";

const router = Router();

router.get("/", (req: Request, res: Response): void => {
  let users = ["Goon", "Tsuki", "Joe"];
  res.status(200).send(users);
});

export { router };

package.json 구성

새 도구를 사용하도록 package.json를 구성해 봅시다! scripts 섹션에 다음을 추가합니다.

scripts: {
  "test": "jest --coverage",
  "dev": "nodemon ./src/server.ts",
  "build": "tsc"
}

API가 작동하는지 확인

이제 우리가 지금까지 어떤 실수도 하지 않았는지 확인합시다. 명령을 실행합니다npm run dev. 브라우저를 열고 http://localhost:5050/로 이동합니다. app.jsAllo! Catch-all route.의 10행에 정의한 환영 메시지가 표시되어야 합니다. 이제 user.routes.tshttp://localhost:5050/users에서 사용자 목록을 찾아야 하는 사용자 경로["Goon", "Tsuki", "Joe"]를 사용해 보십시오.

테스트 작성

이제 여러분이 기다려온 순간... 테스트 중입니다.
프로젝트에 __tests__ 디렉토리를 추가합니다. 해당 디렉토리에서 src 디렉토리에서 만든 파일 구조를 복제합니다. app.test.ts , server.test.ts 및 routes/user.routes.test.ts 을 생성합니다.
.

jest가 작동하는지 확인하기 위해 첫 번째 테스트를 작성해 봅시다.server.test.ts

describe("Server.ts tests", () => {
  test("Math test", () => {
    expect(2 + 2).toBe(4);
  });
});

이제 SuperTest를 사용하여 네트워크 요청 테스트를 수행합니다.app.test.ts

import request from "supertest";

import app from "../src/app";

describe("Test app.ts", () => {
  test("Catch-all route", async () => {
    const res = await request(app).get("/");
    expect(res.body).toEqual({ message: "Allo! Catch-all route." });
  });
});

이제 마지막 테스트에서 users 경로를 테스트합니다.user.routes.test.ts

import request from "supertest";

import app from "../../src/app";

describe("User routes", () => {
  test("Get all users", async () => {
    const res = await request(app).get("/users");
    expect(res.body).toEqual(["Goon", "Tsuki", "Joe"]);
  });
});

.gitignore 추가

이제 git 청결 노트로 .gitignore 파일을 생성합니다.

거기에 git이 무시할 파일을 추가할 수 있습니다.

node_modules
coverage
jest.config.js
dist

폐쇄

TypeScript/Express API에서 테스트를 설정하는 데 상당한 시간이 걸렸습니다. 그리고 내가 찾은 리소스가 얼마나 적은지 정말 놀랐습니다. 이것이 당신이 처한 TypeScript 테스트 곤경에 도움이 되기를 바랍니다.
저는 TypeScript 전문가가 아닙니다. 이 작업을 수행할 수 있어서 기쁩니다. 따라서 자신의 설정이 어떤 것인지에 대한 메모가 있거나 이 설정을 개선하는 데 대한 조언이 있으면 언제든지 연락하거나 댓글을 달아주세요. :)

기사가 마음에 들었거나 내 작업을 더 보고 싶다면 내 portfolio 및 GitHub을 확인하십시오.