[React + Jest] 두 번째 테스트 케이스부터 컴포넌트를 찾을 수 없는 문제(자동 cleanup)

문제 상황

분명히 컴포넌트를 렌더링하고 테스트했음에도 두 번째 테스트부터는 렌더링된 컴포넌트에 접근할 수 없었습니다.

// ... import문

render(
  <React.StrictMode>
    <Provider store={store}>
      <Todos />
    </Provider>
  </React.StrictMode>
);

test('1번 테스트', () => {});
test('2번 테스트', () => {});

 

렌더링된 내용이 두 번째 테스트까지 유지되지 않는다고 생각하고 다음의 내용을 시도하였습니다.

---

시도 1

beforeAll을 사용해서 렌더링했으나 효과가 없습니다. 그 이유는 beforeAll은 첫 테스트 이전에 한 번만 실행되기 때문입니다.

describe('Todos 컴포넌트 관련 테스트', () => {
  beforeAll(() => {
    render(
      <Provider store={store}>
        <Todos />
      </Provider>
    );
  });
  // ... test
});

---

시도 2

beforeAll이 아닌 beforeEach를 사용하여 render를 호출하니 테스트가 제대로 작동하게 되었습니다.

describe('Todos 컴포넌트 관련 테스트', () => {
  beforeEach(() => {
    render(
      <Provider store={store}>
        <Todos />
      </Provider>
    );
  });
  // ... test
});

---

느낀 점

서로 다른 환경이 필요한 테스트는 describe 또는 별도의 파일로 구분하고, beforeEach, afterEach 또는 beforeAll, afterAll을 적절히 활용하여 중복되는 코드를 줄일 수 있을 것 같습니다.

하나의 테스트 케이스만을 활용하여 단계별로 expect를 호출하면 하나의 테스트 안에서 여러 가지 검사를 수행할 수 있겠지만, 테스트 화면에서 어떤 테스트를 수행한 건지 메시지를 전달할 수 없으므로 테스트 과정이 번거로워집니다.

---

추가*

테스트 프레임워크가 afterEach를 지원하는 경우, cleanup이 자동으로 수행됩니다. cleanup이 자동으로 수행되었기 때문에 최초에 렌더링한 리액트 컴포넌트가 첫 테스트 종료 후 unmount되었고, 두 번째 테스트부터 컴포넌트를 참조할 수 없었던 것입니다.

https://testing-library.com/docs/react-testing-library/api/#cleanup