why jest

That said, jest is an excellent unit testing option which provides great TypeScript support.

보통의 폴더구조는 다음과 같다.

리액트-타입스크립트 프로젝트에 jest 도입하기

CRA - Typescript 프로젝트에 jest 도입하기

여기 링크 참고함
CRA 타입스크립트 앱 enzyme와 jest

도입

CRA로 프로젝트를 생성하게되면 모든 테스트 기능수행가능. CRA는 이미 jest가 포함된 상태로 온다.

상세 설정을 원한다면 다음을 참고하자

설정파일 파헤치기

jest configuration은 package.json에 정의될 수 있다. 또는 프로젝트에서 jest.config.js jest.config.ts로 --config <path/to/file.js|ts|cjs|mjs|json> option을 통해 설정 적용하여 실행가능하다.

module.exports = {
  preset: 'ts-jest',
  
  moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'json'],
  //왼쪽에서 오른쪽으로 적힌 순서대로
  //Jest가 file extension이 정확한 file extension 없이도 import 를 할 수 잇게 해준다네요?

  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  // 경로인식
  testMatch: [
    '<rootDir>/**/*.test.(js|jsx|ts|tsx)',
    '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))',
  ],
  // 매치되는 파일만 테스트
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
  // 이 문자열과 일치하면 트랜스폼하지않음
};

• preset : 모듈인식기

// jest.config.js
{
  "preset": "foo-bar"
}

는 다음과 같다.

{
  "preset": "./node_modules/foo-bar/jest-preset.js"
}

• moduleFileExtension

  모듈에서 사용하는 파일 확장자의 배열입니다. 파일 확장자를 지정하지 않고 모듈이 필요한 경우 Jest가 왼쪽에서 오른쪽 순서로 찾을 확장자입니다.
  프로젝트에서 가장 일반적으로 사용되는 확장을 왼쪽에 배치하는 것이 좋습니다. 따라서 TypeScript를 사용하는 경우 "ts"및 / 또는 "tsx"를 배열의 시작 부분으로 이동하는 것을 고려할 수 있습니다.

• transform
  해당하는 파일들을 원하는 모듈에 연결시켜서 트랜스폼 시킨다. 예를 들어, 최신의 자바스크립트 코드를 babel-jest 모듈에 보내 트랜스폼하여 사용. typescript의 경우 ts-jest를 이용하여 트랜스폼한다.

{"\\.[jt]sx?$": "babel-jest"}

• moduleNameMapper
  경로 인식기이다. 경로를 등록해주면 여기서 찾는다.

• testMatch
  테스트 파일찾는 경로이다. 문자열 | 정규표현식에 맞는 파일만 테스트한다.

• transformIgnorePatterns
  이 속성 값(문자열)에 일치하면 트랜스폼 하지않는다.

Babel 설치 (선택) - 최신 문법 사용을 원하는 경우

과거에는 임포트같은 구문이 되지 않아 추가하기도 하였다.

yarn add --dev babel-jest @babel/core @babel/preset-env

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      
    ],
  ],
};

// jest.config.js
    transform: {
        '^.+\\.(js|jsx)?$': 'babel-jest'
    },

절대경로 프로젝트의 경우

// craco.config.js

jest: {
    configure: {
   
      moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1',
      },
      
    },
  },

다음 라인을 추가하여 jest 기능 수행 시 절대경로를 인식할 수 있게해준다. craco 설정파일을 통해 실행 시 웹팩에 내용 추가 가능하다.

에러

describe('snapshot', () => {
  const utils = render(<FactoryDetailPage />);
  expect(utils.container).toMatchSnapshot();
});

다음과 같이 입력하면

에러발생 ‼️

자세히 보니 문법이 잘못되었다.

describe('snapshot', () => {
  it('snapshot', () => {
    const utils = render(<FactoryDetailPage />);
    expect(utils.container).toMatchSnapshot();
  });
});

다음과 같이 입력하면

제대로 수행되는 모습을 볼 수 있다. 문법의 오류 말고도 이 에러가 발생하는 경우가있다.

Jest 테스트 스위트에는 하나 이상의 테스트가 포함되어야합니다.
다음의 레퍼런스를 보자

ts-jest

하지만, Babel과 함께 TypeScript를 사용하는데에 몇 가지 주의사항이 있습니다. Babel에서 TypeScript 지원은 트랜스파일이기 때문에, Jest는 실행 될 때 테스트를 type-check하지 않을 것입니다. type-check를 원한다면, ts-jest를 사용할 수 있습니다.

다음의 코드를 테스트해보자

// DeleteButton.test.tsx
describe('snapshot', () => {
  it('snapshot', () => {
    const utils = render(<DeleteButton hi="hi" />);
    // DeleteButton의 인자는 width:string, height:string이다.
    expect(utils.container).toMatchSnapshot();
  });
});

컴파일 단에서는 에러가 나지만, 타입체크를 하지않아 테스트에는 성공한다.


(이렇게 통과하면 안되잖아...)

테스트 단에서 타입 체크를 하기위해 ts-jest 를 사용한다.

• 우선 ts-jest 설치한다.

npm install ts-jest

• jest.config.js파일 생성

npx ts-jest config:init

• 다음 설정을 추가하자.

// jest.config.js
module.exports = {
  preset: 'ts-jest',
  
  moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'json'],
  //왼쪽에서 오른쪽으로 적힌 순서대로
  //Jest가 file extension이 정확한 file extension 없이도 import 를 할 수 잇게 해준다네요?

  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  // 경로인식
  testMatch: [
    '<rootDir>/**/*.test.(js|jsx|ts|tsx)',
    '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))',
  ],
  // 매치되는 파일만 테스트
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
  // 이 문자열과 일치하면 트랜스폼하지않음
};

preset에 의해 타입스크립트 타입 체크를 수행한다. (테스트 단에서)

Reference

• why jest

• jest docs

• 최소 하나의 테스트가 포함되어야함

• CRA jest

• CRA 타입스크립트 앱 enzyme와 jest