input 렌더링

import { render, screen } from '@testing-library/react';
import Login from '@/pages/login/index';
import '@testing-library/jest-dom';
import { RecoilRoot } from 'recoil';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

jest.mock('next/navigation', () => ({
  useRouter: jest.fn(() => ({
    push: jest.fn(),
    replace: jest.fn(),
    prefetch: jest.fn(),
  })),
}));

describe('Login Page', () => {
  it('should render correctly', () => {
    const queryClient = new QueryClient(); // 새 쿼리 클라이언트 생성
    render(
      <RecoilRoot>
        <QueryClientProvider client={queryClient}>
          <Login />
        </QueryClientProvider>
      </RecoilRoot>
    );

    const inputElement = screen.getByPlaceholderText('ID');
    expect(inputElement).toBeInTheDocument();
  });
});

next/navigation 모듈에서 useRouter 를 모킹하여 생성을 통해 라우터 컨텍스트 이슈를 해결

Recoil과 React Query Provider의 설정을 해줌으로써 컴포넌트가 실행되는 환경을 올바르게 설정해줌

Jest를 통해 필요한 모든 Provider들이 제공되도록 하여 컴포넌트가 기대되는 모든 환경에서 정상 동작하도록 설정

입력 테스트

input이 비어있는지 테스트

it('첫 화면에 input 요소가 비워져있는지 확인', () => {
    const inputElement = screen.getByPlaceholderText('ID');
    expect(inputElement).toBeInTheDocument();
    expect(inputElement).toHaveValue('');
  });

문자 입력 후 내용이 표시되는지 테스트

it('문자 입력 후 내용이 표시되는지 테스트', () => {
    const testInput = '라랄라랄';
    const inputElement = screen.getByPlaceholderText('ID');

    fireEvent.change(inputElement, { target: { value: testInput } });

    expect(inputElement).toHaveValue(testInput);
  });

TestingLibraryElementError: Unable to find an element with the placeholder text of: ID

render를 통해 컴포넌트를 렌더링 한 블록 스코프 안에서 테스트 로직을 작성해야 한다.

describe('Login Page', () => {
  const queryClient = new QueryClient();
  beforeEach(() => {
    render(
      <RecoilRoot>
        <QueryClientProvider client={queryClient}>
          <Login />
        </QueryClientProvider>
      </RecoilRoot>
    );
  });

  it('첫 화면에 input 요소가 비워져있는지 확인', () => {
    const inputElement = screen.getByPlaceholderText('ID');
    expect(inputElement).toBeInTheDocument();
    expect(inputElement).toHaveValue('');
  });

  it('문자 입력 후 내용이 표시되는지 테스트', () => {
    const testInput = '라랄라랄';
    const inputElement = screen.getByPlaceholderText('ID');

    fireEvent.change(inputElement, { target: { value: testInput } });

    expect(inputElement).toHaveValue(testInput);
  });
});

msw 에러

테스트 코드 환경 에러

로그인

 it('로그인 테스트', async () => {
    const inputElement = screen.getByPlaceholderText('ID');
    const pwdElement = screen.getByPlaceholderText('Password');

    fireEvent.change(inputElement, { target: { value: 'testUser' } });
    fireEvent.change(pwdElement, { target: { value: 'test1' } });

    const loginButton = screen.getByText('로그인');
    fireEvent.click(loginButton);

    const loginData = { user_id: 'testUser', user_password: 'test1' };

    const response = await logins(loginData);

    // console.log('로그인 테스트 성공', response);

    expect(response.message).toBe('Login successful!');
  });