JSX pragma와 함께 사용하는 컴포넌트 테스팅 방법

05 Oct 2023

JSXpragma

이 문서에서는 JSX pragma와 함께 사용하는 컴포넌트 테스팅 방법을 소개하겠습니다.

1. JSX Pragma란?

JSX Pragma는 JSX 구문을 사용하기 위해 필요한 설정입니다. 일반적으로 React 프레임워크를 사용하는 경우 react나 @jsxImportSource를 pragma로 지정합니다. pragma는 JSX 컴파일러가 해당 라이브러리를 파싱하고 JSX 엘리먼트를 생성하는 방법을 알아야 합니다.

2. 컴포넌트 테스팅을 위한 환경 설정

먼저, 컴포넌트 테스팅을 위한 환경을 설정해야 합니다. 아래 순서대로 진행해주세요.

2.1 Jest 설치하기

컴포넌트 테스팅을 위해 Jest를 사용합니다. Jest는 React 애플리케이션의 테스트 환경을 제공하는 유용한 도구입니다. 아래 명령을 사용하여 Jest를 설치합니다:

npm install --save-dev jest

2.2 Babel 설정하기

JSX Pragma를 사용하기 위해서는 Babel을 설정해야 합니다. Babel은 JSX 코드를 일반 JavaScript로 변환하는 역할을 합니다. .babelrc 파일을 만들고 아래의 내용을 추가합니다:

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "pragma": "react.createElement", // pragma를 React의 createElement로 설정
      "pragmaFrag": "React.Fragment" // pragmaFrag는 React의 Fragment로 설정
    }]
  ]
}

2.3 테스트 환경 설정

Jest를 사용하여 컴포넌트를 테스트하기 위해 jest.config.js 파일을 만들고 아래의 내용을 추가합니다:

module.exports = {
  moduleNameMapper: {
    "\\.css$": "identity-obj-proxy" // CSS 파일 모듈을 목(mock)으로 대체
  },
  transform: {
    "^.+\\.(js|jsx)$": "babel-jest" // JSX 파일을 Babel을 사용하여 변환
  },
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.jsx?$" // 테스트 파일의 경로 및 이름 패턴 지정
};

3. 컴포넌트 테스트 작성하기

이제 컴포넌트 테스트를 작성할 수 있습니다. 아래는 예시로 Button 컴포넌트를 테스트하는 코드입니다.

// Button.jsx
import React from 'react';

const Button = () => {
  return <button>Click me!</button>;
};

export default Button;

// Button.test.jsx
import React from 'react';
import { render } from '@testing-library/react';
import Button from './Button';

describe('Button 컴포넌트 테스트', () => {
  it('버튼 텍스트가 제대로 렌더링 되었는지 확인', () => {
    const { getByText } = render(<Button />);
    const button = getByText('Click me!');
    expect(button).toBeInTheDocument();
  });
});

위의 예시에서는 @testing-library/react 모듈을 사용하여 컴포넌트를 렌더링하고 테스트를 진행하였습니다. getByText 함수를 사용하여 버튼의 텍스트를 확인하고, expect를 사용하여 테스트 결과를 판별합니다.

4. 컴포넌트 테스트 실행하기

모든 환경 설정이 완료되었으면, 아래 명령을 사용하여 테스트를 실행할 수 있습니다:

npm test

위 명령을 실행하면 Jest가 설정된 테스트 파일을 찾아 실행하고 결과를 출력합니다.

이제 JSX Pragma와 함께 컴포넌트 테스트를 작성하는 방법을 알게 되었습니다. 효율적인 테스트를 위해 Jest와 공식 가이드를 참고하시기 바랍니다.

#JSX #테스팅