리액트 테스트 이런식으로 하는게 맞는지 모르겠습니다... 도움이 필요합니다.!

Question

tdd를 공부해보려고 todolist를 test코드와 함께 작성해보고 있습니다.그런데 이런식으로 테스트를 진행하는 방법이 맞는지 모르겠어서 여쭤보게 되었습니다. 컴포넌트를 작성할때는 아래와 같이 context의 함수가 호출되었는지는 테스트 해주었습니다.const useMockTodoContext = (renderTargetComponent: React.ReactElement>,) => { const mockAddTodo = jest.fn(); const mockDeleteTodo = jest.fn(); const mockTodoContext: TodoContextState = { Todos: mockTodos, addTodo: mockAddTodo, deleteTodo: mockDeleteTodo, }; const wrapper = ({children}: {children: React.ReactNode}) => ( {children} ); render(renderTargetComponent, {wrapper}); return {mockDeleteTodo, mockAddTodo, wrapper}; }import { screen } from "@testing-library/react" import userEvent from "@testing-library/user-event" import TodoItem from "./TodoItem" import { Todo } from "./TodoContext"; import useMockTodoContext from "./hooks/useMockTodoContext"; describe('', () => { const mockItem: Todo = { id: 1, value: 'Test todo', }; const useSetup = () => { const { mockAddTodo, mockDeleteTodo, } = useMockTodoContext(); const deleteButton = screen.getByTestId("DeleteButton"); const span = screen.getByText(mockItem.value); return { mockAddTodo , mockDeleteTodo, deleteButton, span }; } it('has span & button', () => { const {span, deleteButton} = useSetup(); expect(span).toBeInTheDocument(); expect(deleteButton).toBeInTheDocument(); }); it('onClickDeleteButton with item\'s id', async() => { const {deleteButton, mockDeleteTodo} = useSetup(); await userEvent.click(deleteButton); expect(mockDeleteTodo).toBeCalledWith(mockItem.id); }) });하지만 에서는 실제로 ui가 변경되었는지 확인하기 위해실제로 사용하는 Provider를 사용해 아래처럼 테스트 해주었습니다.import { render, screen } from "@testing-library/react" import userEvent from "@testing-library/user-event"; import TodoApp from "./TodoApp" import { TodoProvider } from "./TodoContext"; import { mockTodos } from "./hooks/useMockTodoContext"; describe('', () => { const useSetup = () => { render( ); const input = screen.getByTestId("TodoFormInput"); const submitButton = screen.getByTestId('TodoFormButton') const todoList = screen.getByTestId('TodoList'); return { input, submitButton, todoList }; } it('todoProvider와 함께 렌더링 되는지 with sbumitbutton, todoList', () => { const {submitButton, todoList} = useSetup(); expect(submitButton).toBeInTheDocument(); expect(todoList).toBeInTheDocument(); }); it('input 입력 후 todo 추가버튼 눌렀을 때 추가 되는지 테스트', async () => { const { input, submitButton } = useSetup(); const newTodo = "new todo"; await userEvent.type(input, newTodo); await userEvent.click(submitButton); const newTodoComponent = screen.getByText("new todo") expect(newTodoComponent).toBeInTheDocument(); }); it('삭제버튼 눌렀을때 해당 todo가 screen에서 지워지는지', async () => { useSetup(); const firstDeleteButton = screen.getAllByTestId("DeleteButton")[0]; await userEvent.click(firstDeleteButton); const beforeItem = screen.queryByText(mockTodos[0].value); expect(beforeItem).not.toBeInTheDocument(); }); });이렇게 어떨때는 함수가 호출되는지만 확인하고, 어떨때는 ui가 변경되는지 기준없이 테스트 해도 상관 없나요?만약 기준을 잡는다면 함수가 호출되는 것만 테스트 하는게 좋을까요, 아니면 ui가 실제로 변경되는지 확인하는게 좋을까요?전체 코드는 코드 샌드박스에 올려두었습니다. -> https://codesandbox.io/s/musing-joliot-vbkh13

세브라이드 · Accepted Answer

UI 테스트는 크로매틱을 쓰는게 낫습니다. https://www.chromatic.com/ 테스트 코드는 기능 테스트만 하셔요 ~~ &#43; 근데 스토리북으로 인터렉션 테스트도 가능한 걸로 아는데...흠... https://storybook.js.org/docs/react/writing-stories/play-function 안써봤지만 다 가능하면 &#64;testing-library/react는 굳이...안하셔도...

리액트 테스트 이런식으로 하는게 맞는지 모르겠습니다... 도움이 필요합니다.!

1개의 답변

#react-testing-library 목록