인프런 커뮤니티 질문&답변

제 나름대로 강의를 응용해서 테스트를 짜보려고 강의 시점과 다른 userEvent 버전을 쓰고 있기는 하는데요. 로딩 상태를 테스트할때 마치 로딩 상태를 건너뛰고 바로 리스폰스를 받은 듯이 작동하고 있습니다.... 혹시 userEvent 버전이 달라서 동작이 달라진걸까요? 강의와 코드 내용이 조금 달라진 것에 대한 질문이라 죄송합니다만 아무리 찾아도 이유를 모르곘네요..ㅠㅠㅠ

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

describe('MainPage', () => {
  it('should change page when click buttons', async () => {
    const user = userEvent.setup();
    render(<App />);

    const americaInput = await screen.findByRole('spinbutton', {
      name: /america/i,
    });

    await user.clear(americaInput);
    await user.type(americaInput, '2');

    const englandInput = await screen.findByRole('spinbutton', {
      name: /england/i,
    });

    await user.clear(englandInput);
    await user.type(englandInput, '1');

    const dinnerCheckbox = await screen.findByText(/dinner/i);

    await user.click(dinnerCheckbox);

    const orderButton = screen.getByRole('button', { name: '주문하기' });

    await user.click(orderButton);

    const summeryHeading = screen.getByRole('heading', { name: '주문 확인' });
    expect(summeryHeading).toBeInTheDocument();

    const productHeading = screen.getByRole('heading', {
      name: '여행상품: 3000',
    });

    expect(productHeading).toBeInTheDocument();

    const americaLi = screen.getByText('2 America');
    const englandLi = screen.getByText('1 England');

    expect(americaLi).toBeInTheDocument();
    expect(englandLi).toBeInTheDocument();

    const optionHeading = screen.getByRole('heading', { name: '옵션: 500' });
    const dinnerLi = screen.getByText('Dinner');

    expect(optionHeading).toBeInTheDocument();
    expect(dinnerLi).toBeInTheDocument();

    const confirmCheckbox = screen.getByRole('checkbox');
    const submitButton = screen.getByRole('button');

    await user.click(confirmCheckbox);
    await user.click(submitButton);

    const loading = screen.getByText(/loading/i);
    expect(loading).toBeInTheDocument();

    const completeDiv = await screen.findByRole('heading', {
      name: '주문이 성공했습니다!',
    });

    const subHeadingDiv = await screen.findByRole('heading', {
      name: '지금까지 모든 주문',
    });

    const loadingAfterResponse = screen.queryByText(/loading/i);

    expect(completeDiv).toBeInTheDocument();
    expect(subHeadingDiv).toBeInTheDocument();
    expect(loadingAfterResponse).not.toBeInTheDocument();

    const priceDiv = await screen.findByText('3500', { exact: false });

    expect(priceDiv).toBeInTheDocument();

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

    await user.click(backBtn);

    const newAmericaInput = await screen.findByRole('spinbutton', {
      name: /america/i,
    });

    expect(newAmericaInput).toBeInTheDocument();
    expect(newAmericaInput).toHaveValue(0);
  });
});