테스트 환경과 매처

테스트 프레임워크

태스크 러너, 어설션 라이브러리, 플러그인 등 테스트 실행 및 검증에 필요한 환경을 제공하는 도구

실습에 사용할 테스트 프레임워크는 vitest

• 별다른 설정 없이 vite 기반에서 테스트 구동
• 추가 설정 없이 ESM, TypeScript, JSX 사용 가능
• Jest 호환 API 및 가이드 제공

자세한 사항은
https://vitest.dev/guide/features.html

vitest는 vite.config.ts 파일 설정 내용을 따르지만 추가적으로 적용하고 싶은 설정이 있다면
vite.config.ts 파일에서 test 항목을 작성하거나,
vitest.config.ts 파일을 따로 생성해서 작성하면 된다.

vite.config.js

export default defineConfig({
  plugins: [react(), eslint({ exclude: ['/virtual:/**', 'node_modules/**'] })],
  test: {
    globals: true, /* vitest 에서 제공하는 api를 별도의 import 없이 사용하겠습니다. */
    environment: 'jsdom',  /* jsdom 환경에서 테스트가 구동되도록 설정하겠습니다. */
    setupFiles: './src/utils/test/setupTests.js',
  },/* 테스트 실행을 위해 필요한 설정 내용은 해당 경로에 존재하는 파일을 참고하겠습니다. */
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
  },
});

※jsdom?
브라우저와는 다르게 node.js 환경에서는 dom이 존재하지 않기 때문에 node.js 에서도 프론트엔드컴포넌트의 결과물인 dom이 제대로 렌더링되는 것을 확인하기 위해서 순수 javascript로 구현한 환경

screen.debug 함수를 사용하면 테스트 실행시 해당 컴포넌트의 dom 구조를 볼수 있다.

테스트 메소드

it,test 메소드는 기능상의 차이는 없지만 명칭이 다르기 때문에 테스트를 작성하는 부분에서 차이가 존재한다.

test('if it does this thing', () => {});
it('should do this thing', () => {});

개인적인 생각이지만, test의 경우는 특정 기능에 대한 일련의 값이 출력되는가를 확인할 때, it의 경우는 이대로 동작되어야 하는데 그렇데 되고있는 지를 확인할때 사용하는 방식으로 boolean의 성격이 있다고 생각한다.

describe는 원하는 테스트를 묶어서 독립된 context를 만들어서 사용한다. 어느 특정한 경우에 특수한 메소드를 사용해야하는 경우가 있다면 describe를 묶어서 해당 범위내에만 사용할 메소드를 선언해주면 다른 테스트들에게 영향을 주지 않는다.

expect : 테스트를 실행할때 얻고자 하는 기대 결과에 해당하며, 검증 대상에 대한 단언(assertion)을 실행할수 있게된다.

단언이란, 테스트가 통과하기 위한 조건을 서술하기 위해 사용하는것이다.

예를 들어서 textField 컴포넌트에 placeholder가 dom에 제대로 렌더링 되는지 확인하기 위해서 아래와 같이 테스트 코드를 작성했을 때

it('기본 placeholder "텍스트를 입력해 주세요."가 노출된다.', async () => {
  // 기대결과 === 실제 결과 -> 성공
  // 기대결과 !== 실제 결과 -> 실패
  await render(<TextField />);
  screen.debug();

  const textInput = screen.getByPlaceholderText('텍스트를 입력해 주세요.');
  expect(textInput).toBeInTheDocument();
});

expect 메소드에서 placeHolder가 존재하는지 확인했을 때 존재하는 것이 기대 결과인데, 이를 확인하기위해 toBeInTheDocument라는 api를 사용하게 되며, 이것이 바로!

매처

기대의 결과를 검증하기위해 사용하는 api 집합이다.

기본적으로 제공하는 api 목록은 아래의 링크에서 확인할 수 있다.
https://vitest.dev/api/expect.html

링크를 확인해보면 알겠지만, 이전에 작성한 코드에서 사용한 toHaveClass나 toBeInTheDocument 항목은 보이지 않는데, 이것은 '@testing-library/jest-dom'을 설치해서 추가하여 사용할 수 있는 매처를 확장했기 때문이다.