React에 Jest 추가하기

Jest는 React와 완벽하게 작동합니다. 실제로 Create React App을 사용하여 앱을 설정했다면 이미 Jest와 함께 제공됩니다.

다음과 유사한 내용이 포함된 package.json 파일을 확인하여 확인할 수 있습니다.

{
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
  },
  "scripts": {
    "test": "react-scripts test",
  },
}

Note: The above file also has other things, but these should be there.

이렇게 하면 Jest를 사용하여 구성 요소와 기능을 테스트할 수 있습니다.

첫 번째 테스트 작성

이 기사에서는 일반 React 스타터를 사용하겠습니다. 따라하고 싶다면 GitHub here 에서 찾을 수 있습니다.

앱의 경우 테스트하기 쉽도록 아주 기본적인 것을 만들어 봅시다.
여러 요소와 작업을 테스트할 수 있는 카운터 애플리케이션을 만들고 싶습니다.

제가 사용할 앱은 다음과 같습니다.

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>The counter is now on {count}</p>
      <button onClick={() => setCount(count + 1)}>Add one</button>
    </>
  );
}

이 앱은 위에서 볼 수 있듯이 단락과 버튼을 렌더링합니다. 버튼을 클릭하면 앱에서 카운트에 1을 추가해야 합니다.

보시다시피 앱에는 이미 App.test.js라는 기본 테스트 파일이 함께 제공됩니다.

요구 사항을 해결하기 위해 해당 파일을 수정할 것입니다.
먼저 수행할 테스트를 살펴보겠습니다.

개수와 관계없이 단락이 있는지 확인하려고 합니다

.

기본값이 0인 것을 보고 싶습니다

.

+1

이 가능한지 확인하고 싶습니다.

이에 대한 와이어프레임을 빠르게 설정해 보겠습니다.

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders default text', () => {
  // Todo
});

test('should default to zero', () => {
  // Todo
});

test('should update the count', () => {
  // Todo
});

이제 첫 번째 테스트부터 시작하겠습니다. render 함수로 수행되는 응용 프로그램을 렌더링하려고 합니다.

test('renders default text', () => {
  render(<App />);
});

그런 다음 텍스트의 특정 부분이 화면에 있는지 확인하려고 합니다.
우리의 경우 끝에 숫자가 다를 수 있으므로 정규식을 사용합시다.

test('renders default text', () => {
  render(<App />);
  const defaultText = screen.getByText(/The counter is now on/g);
  expect(defaultText).toBeInTheDocument();
});

이제 이 테스트를 이미 자유롭게 테스트해 보십시오.

다음은 매우 유사하지만 첫 번째 값이 0으로 기본 설정되어 있는지 확인하려고 합니다.

test('should default to zero', () => {
  render(<App />);
  const defaultText = screen.getByText('The counter is now on 0');
  expect(defaultText).toBeInTheDocument();
});

보시다시피 전체 텍스트 부분을 한정해야 하므로 더 이상 정규식이 필요하지 않습니다.

마지막 테스트를 위해 먼저 버튼 구성 요소를 가져와야 합니다. 여러 가지 방법이 있지만 우리는 하나만 있기 때문에 findByRole 함수를 사용할 수 있습니다.

const button = await screen.findByRole('button');

여기서 await를 사용했으므로 이 테스트를 async 함수로 만들어야 합니다.
그리고 그 옆에 이 버튼을 클릭하고click 이제 텍스트가 업데이트되는지 확인합니다.

test('should update the count', async () => {
  render(<App />);
  const button = await screen.findByRole('button');
  button.click();
  const plusText = screen.getByText('The counter is now on 1');
  expect(plusText).toBeInTheDocument();
});

그리고 그게 다야. 이제 React 애플리케이션에 몇 가지 기본 테스트 사례를 추가했습니다.

물론 이것은 매우 기본적이지만 앱이 의도한 대로 작동하도록 하는 데 이미 큰 차이를 만들 수 있습니다.

이것GitHub branch에서 결과를 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나