본문 바로가기
🌳Frontend/react

[Jest] 설치 및 기본 실행

by Bㅐ추 2023. 3. 21.
728x90
반응형

설치

 yarn add -D jest
 yarn add -D @types/jest

 

jest 설정파일 추가

jest --init

 

✔ Would you like to use Typescript for the configuration file? … 타입스크립트 파일로 설정할까? 난 no
✔ Choose the test environment that will be used for testing › 어떤 환경에서 test 돌릴거니? 난 node
✔ Do you want Jest to add coverage reports? …  커버리지 기능을 사용할거니 ? yes
✔ Which provider should be used to instrument code for coverage? › 본인은  babel
✔ Automatically clear mock calls, instances, contexts and results before every test? … yes

 

 

하고나면, package.json 에 test script 추가 및 jest.config.js 파일이 생성된다.

 

본인은 다음과 같이 설정을 커스텀했다.

(test 하는 디렉토리를 __test__ 가 아닌 test 하위로 하고 싶었기 때문)

module.exports = {
  clearMocks: true,
  collectCoverage: true,
  ....,
  
  roots: [
    "<rootDir>"
  ],
  
  testMatch: [
    '<rootDir>/test/**/*.{js,jsx,ts,tsx}',
  ],
};

 

그뒤, 대충 프로젝트 루트에 test 폴더 생성 및 테스트코드를 아무렇게나 작성하고,

describe('test', () => {
  test('test', () => {
  });
});

 

jest --ci 를 돌리면, 일단은 성공.

$ jest --ci
 PASS  test/dd.test.ts
  test
    ✓ test

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |       0 |        0 |       0 |       0 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.138 s, estimated 1 s
Ran all test suites.
✨  Done in 0.77s.
728x90
반응형