테스트코드 맛보기

// .../__tests__/errorPageCheck.test.tsx it('A 페이지의 확인 버튼 클릭 후 재고 부족인 경우 오류 페이지에 목록이 렌더링된다.', async () => { render( <ParentComponent ... /> ); const confirmBtn = await screen.findByText('확인') await waitFor(() => expect(confirmBtn).toBeEnabled()); await userEvent.click(confirmBtn); const errorIconInErrorTab = screen.getByLabelText('error icon'); // 에러 아이콘 존재 여부 확인 expect(errorIconInErrorTab).toBeInTheDocument(); const errorTab = screen.getByText('오류'); await userEvent.click(errorTab); const errorPage = screen.getByLabelText('errorlist tab page'); const renderedErrorRowsCount = within(errorPage).getByRole('rowgroup').childElementCount; const mockErrors = result.errorData; expect(renderedErrorRowsCount).toEqual(mockErrors.length); // 렌더링된 rows 와 mockErrors 데이터의 수를 비교 });

// mockHandlers.ts export const handlers: GraphQLHandler[] = [ ... const isErrorCase = !!variables.isError; return HttpResponse.json({ data: { result: isErrorCase ? mockData.errorCase : mockData.normalCase }, }); }),

// .../__tests__/CheckData.test.tsx import { server } from '.../mocks/server'; import { handlers } from './mockHandlers'; ... it('조회 버튼을 누르면 데이터가 정상적으로 렌더링된다.', async () => { server.use(...handlers); const searchBtn = screen.getByRole('button', { name: '조회', }); await userEvent.click(searchBtn);// 조회 버튼 클릭! const rowsCount = screen.getByRole('rowgroup').childElementCount; // 렌더링된 데이터의 로우수 expect(rowsCount).toBe(mockData.totalCount); // 화면의 rows 와 mock data 개수 비교 });

// mockHandlers.ts export const handlers: GraphQLHandler[] = [ linkedGrahpql.query< getMockDataQuery, getMockDataQueryVariables >(namedOperations.Query.getMockData, () => { return HttpResponse.json({ data: { mockData, }, }); }), ]

// mockData.ts export const mockData = { ... }

it('셀러 계정인 경우 특정탭만 존재한다.', () => { const { result } = renderHook(() => useLocalStore()); const prevState = result.current.data; act(() => { stateVar({ ...prevState, user: { ...prevState.user, type: 'SELLER', // 셀러 권한 설정해주기 }, }); }); // 셀러 권한인 상태에서 테스트할 컴포넌트 렌더링하기 render( <Invoices ... /> ); const tablist = screen.getByRole('tablist'); expect(tablist.children).toHaveLength(1); expect( // 예상되는 탭이 렌더링되고 있는지 확인하기 within(tablist.children[0] as HTMLElement).getByText('특정탭') ).toBeInTheDocument(); });

const selectInput: HTMLInputElement = await screen.findByRole( 'textbox', { name: '상품명', } ); expect(selectInput.value).toBe('처음 선택된 상품'); userEvent.click(selectInput); userEvent.type(selectInput, '{arrowdown}{arrowdown}{enter}'); expect(productNameInput.value).toBe('변경된 상품');

it('테스트 버튼 클릭시 특정 값을 로컬스토리지에 저장한다.', async () => { const testBtn = screen.getByText('테스트 버튼'); await userEvent.click(testBtn); const storedValue = JSON.parse( window.localStorage.getItem('specific value') ?? '' ); expect(storedValue[mockData.id]).toBeTruthy(); expect(testBtn).not.toBeInTheDocument(); });

describe('파일 드롭 첨부 테스트.', () => { it('파일이 최대 크기를 초과한 경우, 알럿 메세지를 보여준다.', async () => { const largeMockFile = createMockFile({ sizeInMB: 20, fileName: 'large-mock-file.xlsx', fileType: excelType, }); const dropInput = screen.getByLabelText('drop-box'); fireEvent.drop(dropInput, { dataTransfer: { files: [largeMockFile], types: ['Files'], }, }); await waitFor(() => expect( screen.getByText( `파일 사이즈 10MB까지 업로드 가능합니다.` ) ).toBeInTheDocument() ); });

it('모바일이면서 아이폰인 경우, 테스트 다운로드 버튼이 정상 렌더링 된다.', () => { Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: MOBILE_WIDTH, }); Object.defineProperty(global.navigator, 'userAgent', { writable: true, configurable: true, value: 'iPhone', }); render(<MockDownloadButton />); const downloadButton = screen.getByText('테스트 다운로드'); expect(downloadButton.getAttribute('href')).toBe(testUrl.iphone); });