HotHandCoding

DarrenKwon

installation 
(1) 설치
yarn add jest
yarn add jest-cli -D
"scripts": {
  "dev": "babel-node index.js",
  "test": "jest"
},
 
 
(2) jest-cli option
jestjs.io/docs/en/cli#--coverageboolean
 
단순히 jest 명령 뿐만 아니라 여러 option을 통해 테스트를 구동할 수 있다.
아래는 Nest 프로젝트를 생성하면 자동으로 세팅해주는 test 관련 명령어들이다.
"test": "jest",
"test:watch": "jest --watch",
"test:cov": "jest --coverage",
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
"test:e2e": "jest --config ./test/jest-e2e.json"
 
- coverage
jest --coverage
coverage는 관련 보고서도 자동으로 만들어준다. 최상위 폴더에 ./coverage를 확인해보자.
textRegex, textMatch에 해당하지 않는 파일을 coverage로 포함하지 않는데, 
just 구성에서 collectCoverageFrom를 통해 coverage 대상을 명시할 수 있습니다.
저는 최상위 경로에 있는 *js, *ts를 모두 포함시켰습니다.
"collectCoverageFrom": [
  "./*.[jt]s"
]
 
그 외에 coverageThreshold를 통해 최소 요구 coverage 정도를 설정할 수 있는 등의 기능이 있습니다.
 
 
- watchAll
 
watch 모드입니다.
jest --watchAll
 
 
jest configuring
jestjs.io/docs/en/configuration
 
jest.config.js/ts 혹은 package.json 내부에 "jest"를 정의함으로서 jest를 구성할 수 있다.
Nest에서는 package.json을 확인해보면 jest 세팅은 다음과 같이 되어 있다.
"jest": {
  "moduleFileExtensions": [
    "js",
    "json",
    "ts"
  ],
  "rootDir": "src",
  "testRegex": ".*\\.spec\\.ts$",
  "transform": {
    "^.+\\.(t|j)s$": "ts-jest"
  },
  "collectCoverageFrom": [
    "**/*.(t|j)s"
  ],
  "coverageDirectory": "../coverage",
  "testEnvironment": "node"
}
 
여기에는 많은 옵션들이 존재하지만, 기본적으로 사용된 옵션을 위주로 알아보자.
 
 
- moduleFileExtensions 
jestjs.io/docs/en/configuration#modulefileextensions-arraystring
Default: ["js", "json", "jsx", "ts", "tsx", "node"]
 
여러분들이 작성한 모듈의 확장자를 배열로 적어주면 된다. 가장 자주 사용되는 확장자부터 차례대로 적어주면 된다. 만약 TS를 주로 사용하는 프로젝트라면 ts, tsx를 먼저 위치시켜주면 된다.
Nest에서는 allowJS를 켜고 사용하는 사람의 편의성 때문인지 js, json, ts 순으로 배치했다.
일반적인 프로젝트에서는 굳이 건드릴 필요는 없다.
 
 
- rootDir
jestjs.io/docs/en/configuration#rootdir-string
Default: Jest config file이 있는 경로 혹은 package.json이 있는 경로. 둘 다 존재하지 않는다면 현재 경로를 rootDir로 설정함.
 
프로젝트 구조에 따라 종종 src나 lib와 같은 다른 경로를 rootDir로 지정하고 싶다면 적어주면 된다. 여튼 진입점을 적어주면 된다. Nest에서는 비즈니스 로직이 존재하는 코드가 전부 ./src이다.
 
 
- testRegex 
The pattern or patterns Jest uses to detect test files.
__tests__ 폴더 내에 있는 모든 것, *.(spec|test).(js|ts) 형식인 모든 파일을 test 대상으로 여긴다. 
공식 문서에 나와있는 예시는 다음과 같다.
├── __tests__
│   └── component.spec.js # test
│   └── anything # test
├── package.json # not test
├── foo.test.js # test
├── bar.spec.jsx # test
└── component.js # not test
 
Nest에서는 "testRegex": ".*\\.spec\\.ts$"이다. 이 말인 즉슨, *\spec\ts 꼴 인 모든 것을 test file로 인식하겠다는 것이다.  *tip) \\ (문자 자체의 \)
nest cli를 활용하여 작성하면 자동으로 *.spec.ts 꼴인 테스트파일이 생기기 때문에 이런 식으로 작성되어 있다. 굳이 건드릴 필요 없는 설정이다.
 
 
- testMatch 
jestjs.io/docs/en/configuration#testmatch-arraystring
 
(default: [ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)" ])
살펴보니, __tests__ 폴더 내에 있는 모든 js, ts, jsx, tsx 와 spec, test가 붙은 spec.[jt]s와 test.[jt]s를 
 
The glob patterns Jest uses to detect test files. By default it looks for .js, .jsx, .ts and .tsx files inside of __tests__ folders, as well as any files with a suffix of .test or .spec (e.g. Component.test.js or Component.spec.js). It will also find files called test.js or spec.js.
 
역시나 nest에서는 굳이 건드릴 필요 없지만, 다른 프레임웤을 사용 중이라면 자주 testRegex, testMatch 둘 중에 하나는 사용하게 될 수도 있다.
 
 
- transform
jestjs.io/docs/en/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
Default: {"\\.[jt]sx?$": "babel-jest"}
쉽게 말해 test는 일반 로직과 분리되어 동작합니다. 때문에 babel이나 webpack으로 변환되는 과정을 따로 작성해주어야 하는데 참으로 고생스러운 일입니다. transoform은 이런 변환을 자동으로 해줍니다.
 
기본값의 정규식을 해석해보자면 \.js, \.jsx, \.ts, \.tsx인 경우 babel-jest로 변환하라는 것입니다. 물론 babel-jest 플러그인을 설치해줘야 합니다. github.com/facebook/jest/tree/master/packages/babel-jest#setup 여기서 확인해보실 수 있습니다.
 
Nest에서는 "transform": {"^.+\\.(t|j)s$": "ts-jest"} 로 지정되어 있습니다. 즉, ..\.js ..\.ts (depth는 상관 없음. .+는 .이 1개 이상 존재함을 의미) 꼴인 파일을 모두 ts-jest로 transform하는 것을 의미합니다. ts-jest는 github.com/kulshekhar/ts-jest 여기를 참고합시다.
 
 
- collectCoverageFrom
jestjs.io/docs/en/configuration#collectcoveragefrom-array
Default: undefined
 
glob patterns으로 coverage 정보를 위해 수집되어야 할 파일들을 명시합니다. glob pattern에 해당하는 파일에 대한 test가 없다고 하더라도 coverage로 포함됩니다.
 
Nest에서는 "collectCoverageFrom": ["**/*.(t|j)s"] 값인데, 어느 파일이건 ts/js면 일단 coverage 범위에 넣는군요.
 
- coverageThreshold 
jestjs.io/docs/en/configuration#coveragethreshold-object
Default: undefined
 
coverage 통과 기준을 세울 수 있습니다. 특정 coverage 수치 이상을 통과하지 못한다면 경고를 해줍시다.
{
  ...
  "jest": {
    "coverageThreshold": {
      "global": {
        "branches": 50,
        "functions": 50,
        "lines": 50,
        "statements": 50
      },
      "./src/components/": {
        "branches": 40,
        "statements": 40
      },
      "./src/reducers/**/*.js": {
        "statements": 90
      },
      "./src/api/very-important-module.js": {
        "branches": 100,
        "functions": 100,
        "lines": 100,
        "statements": 100
      }
    }
  }
}
 
 
 
- coverageDirectory 
Default: undefined
The directory where Jest should output its coverage files.
Nest에서는 "coverageDirectory": "../coverage" 입니다.
 
 
- testEnvironment 
jestjs.io/docs/en/configuration#testenvironment-string
Default: "jsdom"
 
테스트가 진행되는 환경입니다. 기본적으로는 jsdom, 즉, dom입니다. node에서 jest를 사용하고자 하면 nede를 적어주시면 됩니다. 당연히 Nest에서는 node입니다.
 
- moduleNameMapper
jestjs.io/docs/en/configuration#modulenamemapper-objectstring-string--arraystring
Test 대상이 되는 파일에서 사용하는 외부 모듈들, 이를테면 entity, 이미지, css 등을 불러올 경로를 지정합니다.
현재 nest 7.5.3 에서는 테스트 코드를 작성할 때 외부 모듈을 찾을 수 없다고 에러를 내서, 사용자가 적절히 구성해줄 필요가 있습니다.
 
"moduleNameMapper": {"^src/(.*)$": "<rootDir>/$1"}
 
Note: If you provide module name without boundaries ^$ it may cause hard to spot errors. E.g. relay will replace all modules which contain relay as a substring in its name: relay, react-relay and graphql-relay will all be pointed to your stub.
 
- coveragePathIgnorePatterns
jestjs.io/docs/en/configuration#coveragepathignorepatterns-arraystring
 
Default: ["/node_modules/"]
test coverage 대상에서 제외할 파일을 등록할 수 있습니다.
 
 
 
 
 
jest.config.js/ts 혹은 package.json 내부에 "jest"를 정의함으로서 jest를 구성할 수 있다.
testMatch의 기본값에 따라 테스트 할 파일을 찾아 테스팅을 진행한다는 사실만 이해하면 사용할 수 있기는 하다.
자세한 사항은 따로 정리한 아래 포스트를 참고하자.
 
별다로 해줄 설정은 없지만 최소한 testEnvironment를 node로 설정하여, 무거운 브라우저를 실행하지 못하도록만 설정해두겠다. 따로 설정하지 않으면 기본값은 Default: "jsdom" 인데, js로 브라우저 환경을 구성한 것이다. 궁금하면 github repo에 가보자.
console.log(window); // 브라우저를 굳이 불러올 필요 없음. undefined가 되게 하자
test("1 + 2 = 3", () => {
  expect(sum(1, 2)).toEqual(3);
});
"jest": {
  "testEnvironment": "node"
}
 
 
using-babel
jestjs.io/docs/en/getting-started.html#using-babel
 
npm ls로 babel-jest가 설치되어있는지 살펴보면, jest-cli의 의존성으로 이미 설치가 되어 있다.
프로젝트 성격에 따라 다른 식으로 구성하고 싶다면 위 첨부한 공식 문서를 보자.
$ npm ls babel-jest
jest-tutorial@1.0.0 D:\Code\jest-tutorial
+-- babel-jest@26.6.3 
`-- jest-cli@26.6.3
  `-- jest-config@26.6.3
    `-- babel-jest@26.6.3  deduped
 
 
간단한 jest 강의를 제공합니다.
실제 프로젝트에서 사용할만큼은 아니지만, jest 문서의 감조차 잡기 어려울 때는 도움이 됩니다.
 
 
 
유닛 테스트?
 
유닛 테스트 : 분리된 유닛, 즉, 특정한 함수 하나만을 테스트하고 싶을 때 사용
end-to-end(e2e) 테스트 : 유저가 특정 행동을 할 때의 테스트. 처음부터 끝까지 전부 테스트한다고 해서 end to end
 
nest에서는 둘 다 가능하게 세팅해놓았다. package.json을 보면 친절하게 이미 세팅을 해놓은 것을 알 수 있다.
뭐, 없어도 그냥 jest 깔고 사용하면 된다.
  "scripts": {
    ... 중략
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
  },
 
 
서비스, 컨트롤러 등을 생성할 때 spec.ts 가 같이 생성된 것을 확인할 수 있었다. 예를 들면 movies.controller.spec.ts와 같은. CRA에서도 spec.ts를 기본적으로 가지고 있다.
 
spec.ts는 테스트와 관련된 코드를 작상하는 곳으로, jest가 .spec.ts 혹은 spec.js 확장자를 자동으로 찾아 테스트를 진행한다.
 
여기서 jest란 javascrsipt 테스팅 툴로 javascript로 만들어진 것이면 전부 테스팅할 수 있다.
It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more! 라고 하니 프론트에서도, js 기반인 백엔드에서도 사용할 수 있다.
 
 
아주 간단히 jest를 이용해 testing을 진행해보았다. (jestjs.io/docs/en/getting-started.html)
function add(a, b) {
  return a + b;
}
module.exports = { add };
const { add } = require("./app");
test("1 + 2 = 3", () => {
  expect(add(1, 2)).toEqual(3);
});
  "scripts": {
    "start": "nodemon --exec node app.js",
    "test": "jest"
  },
 
 
 
Furthermore
 
여기에서는 작성한 nest 백엔드 service 로직을 jest를 이용해 테스팅해보려고 한다.
jestjs.io/docs/en/setup-teardown
 
테스트할 대상인 nest 코드다.
import { Injectable, NotFoundException } from '@nestjs/common';
import { CreateMovieDTO } from './dto/create-movie.dto';
import { UpdateMovieDTO } from './dto/update-movie.dto';
import { Movie } from './entities/movie.entity';
@Injectable()
export class MoviesService {
  private movies: Movie[] = []; // moives 객체를 담을 array
  getAll(): Movie[] {
    return this.movies;
  }
  getOne(id: number): Movie {
    const movie = this.movies.find(movie => movie.id === id);
    if (!movie) {
      throw new NotFoundException(`Movie with ID NotFound: ${id}`);
    }
    return movie;
  }
  deleteOne(id: number): boolean {
    this.getOne(id); // 해당 id를 가진 영화가 없으면 에러
    this.movies = this.movies.filter(movie => movie.id !== id);
    return true;
  }
  create(movieData: CreateMovieDTO) {
    this.movies.push({ id: this.movies.length + 1, ...movieData });
  }
  update(id: number, updateData: UpdateMovieDTO) {
    const movie = this.getOne(id);
    this.deleteOne(id);
    this.movies.push({ ...movie, ...updateData });
  }
}
 
여기에 있는 것 중 함수인 getAll, getOne, deleteOne, create, update 를 전부 유닛테스트 해보려고 한다.
 
describe나 it 같은 경우에는 mocha에서 해본 것과 동일하다. 테스트 수트는 테스트 환경으로, describe()로 구현한다. 테스크 케이스는 실제 테스트를 말하며 it()으로 구현한다. 사실상 구획 나누기라고 볼 수 있다.
 
beforeAll, afterAll
In some cases, you only need to do setup once, at the beginning of a file. This can be especially bothersome when the setup is asynchronous, so you can't do it inline. Jest provides beforeAll and afterAll to handle this situation.
 
beforeEach, afterEach
If you have some work you need to do repeatedly for many tests, you can use beforeEach and afterEach.
 
위 내용들을 종합하여 아래와 같이 유닛 테스트를 진행할 수 있다.
import { NotFoundException } from '@nestjs/common';
import { Test, TestingModule } from '@nestjs/testing';
import { MoviesService } from './movies.service';
describe('MoviesService', () => {
  let service: MoviesService;
  beforeAll(() => console.log('start Test! intialize DB'));
  // 각 테스트 마다 실행 됨
  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      providers: [MoviesService],
    }).compile();
    service = module.get<MoviesService>(MoviesService);
  });
  // 각 테스트 실행 후에 작동
  // afterEach(async () => console.log('after one testing'));
  // 각각의 유닛 테스팅은 it로 진행
  it('service should be defined', () => {
    expect(service).toBeDefined();
  });
  describe('getAll testing', () => {
    it('should return an array', () => {
      const result = service.getAll();
      expect(result).toBeInstanceOf(Array);
    });
  });
  describe('getOne testing', () => {
    it('should return a movie', () => {
      // 뭐라도 가져오려면 적어도 1개는 있어야 하니 만들어 줌
      service.create({
        title: 'dummy Movie',
        year: 2020,
        genres: ['thriller', 'SF'],
      });
      const movie = service.getOne(1);
      expect(movie).toBeDefined();
      expect(movie.id).toEqual(1);
    });
    it('should throw 404 error', () => {
      try {
        service.getOne(100000000);
      } catch (err) {
        expect(err).toBeInstanceOf(NotFoundException);
        expect(err.message).toEqual('Movie with ID NotFound: 100000000');
      }
    });
  });
  describe('deleteOne testing', () => {
    it('delete a movie', () => {
      service.create({
        title: 'dummy Movie',
        year: 2020,
        genres: ['thriller', 'SF'],
      });
      const beforeMovies = service.getAll().length;
      service.deleteOne(1);
      const afterDelete = service.getAll().length;
      expect(afterDelete).toBeLessThan(beforeMovies);
    });
    it('should return a 404', () => {
      try {
        service.deleteOne(10000);
      } catch (err) {
        expect(err).toBeInstanceOf(NotFoundException);
      }
    });
  });
  describe('create testing', () => {
    it('should create a movie', () => {
      const beforeCreate = service.getAll().length;
      service.create({
        title: 'dummy Movie',
        year: 2020,
        genres: ['thriller', 'SF'],
      });
      const afterCreate = service.getAll().length;
      expect(afterCreate).toBeGreaterThan(beforeCreate);
    });
  });
  describe('update testing', () => {
    it('should update a moive', () => {
      service.create({
        title: 'dummy Movie',
        year: 2020,
        genres: ['thriller', 'SF'],
      });
      service.update(1, { title: 'updated Movie' });
      const movie = service.getOne(1);
      expect(movie.title).toEqual('updated Movie');
    });
    it('should return a 404', () => {
      try {
        service.update(10000, { title: 'updated Movie' });
      } catch (err) {
        expect(err).toBeInstanceOf(NotFoundException);
      }
    });
  });
  afterAll(() => console.log('end test! need to clear DB'));
});
 
테스트 도중 콘솔로 출력한 결과는 테스트 결과지 마지막에 순서대로 출력해준다.

jest (1) 수정중...

댓글