Test코드 넣기( Vite + React + Typescript )

// package.json

    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^15.0.4",
    "@types/jest": "^29.5.12",
    
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "ts-jest": "^29.1.2",

 

// tsconfig.json

"esModuleInterop": true,

 

module.exports = {
  roots: ['<rootDir>/src'],
  testMatch: ['**/__tests__/**/*.+(ts|tsx|js)', '**/?(*.)+(spec|test).+(ts|tsx|js)'],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  testEnvironment: 'jsdom',
};

 

import '@testing-library/jest-dom';
import { render, fireEvent, screen } from '@testing-library/react';
import { ChannelSubjectItem } from '../_types/type';
import ChannelSubject from '../_components/ChannelSubject';

describe('toggles display style of Body on DropDownButton click', () => {
  let mockData: ChannelSubjectItem;
  let mockChild: React.ReactNode;

  beforeEach(() => {
    mockData = {
      id: 1,
      name: 'Test Subject',
    };
    mockChild = <span>Test Child</span>;

    render(<ChannelSubject data={mockData}>{mockChild}</ChannelSubject>);
  });

  it('initially hides the Body', () => {
    const button = screen.getByTestId('channel-dropdown');

    // Check initial state
    expect(screen.getByText('Test Child')).toBeVisible();

    // Simulate a button click
    fireEvent.click(button);

    // Check if the text is now present
    expect(screen.queryByText('Test Child')).not.toBeVisible();

    // Simulate another button click
    fireEvent.click(button);

    // Check if the text is hidden again
    expect(screen.getByText('Test Child')).toBeVisible();
  });
});

 

Dropdown 버튼을 Test하는 코드이다.

Dropdown 시 style의 display: block 한번 더 클릭 시 display: none으로 변경해준다.

 

beforeEach를 사용해 Test코드가 실행되기전 사전에 처리해야할 작업을 수행한다.

 

toBeVisible() 함수를 사용하여 화면에 보이는지 안보이는지를 판단한다.

toBeInDocument()를 사용하면 실제로 DOM에서 제거된 것이 아니면 항상 존재하기때문에 해당 Test에서 사용하기엔 부적합하다.