React Test 코드 작성

<div class="title">Hello</div>

const Home = () => {
  return (
    <section>
      <h1>Hello Word</h1>
      <p>안녕하세요. 프론트엔드 개발자 MAENG입니다.</p>
    </section>
  )
}

describe('Home', () => {
  it('renders Home', () => {
    const { getByText } = render(<Home />)
    expect(getByText('Hello world')).toBeInTheDocument()
    expect(getByText('안녕하세요. 프론트엔드 개발자 MAENG입니다.')).toBeInTheDocument()
  })
})

const Button = ({ onClick }) => {
  return <button onClick={onClick}>버튼</button>
}

describe('Button', () => {
  it('renders Button', () => {
    const onClick = jest.fn() // 가짜 함수
    const { getByText } = render(<Button onClick={onClick} />)
    expect(getByText('버튼')).toBeInTheDocument()
    fireEvent.click(button)
    expect(onClick).toBeCalledTimes(1)
  })
})

const Form = () => {
  const [text, setText] = useState('')
 
  return (
    <form>
      <input
        type="text"
        placeholder="텍스트를 입력해주세요."
        value={text}
        onChange={({ target: { value } }) => setText(value)}
      />
      <button disabled={!text}>제출</button>
    </form>
  )
}

describe('Form', () => {
  it('renders Form', () => {
    const { getByText, getByPlaceholderText } = render(<Form />)
 
    const input = getByPlaceholderText('텍스트를 입력해주세요.')
    const button = getByText('제출')
 
    expect(button).toBeDisabled()
    fireEvent.change(input, { target: { value: 'Maeng Input Test' } })
    expect(input.value).toBe('Maeng Input Test')
    expect(button).toBeEnabled()
  })
})

const useInput = (initialValue = null) => {
  const [value, setValue] = useState(initialValue)
  const handler = useCallback((e) => {
    setValue(e.target.value)
  }, [])
  return [value, handler]
}

describe('useInput', () => {
  it('update value when handler is called', () => {
    const { result } = renderHook(() => useInput())
    expect(result.current[0]).toBe(null)
    act(() => result.current[1]({ target: { value: 'Maeng Input Test' } }))
    expect(result.current[0]).toBe('Maeng Input Test')
  })
})

const useFetchData = () => {
  const { data, isLoading, error } = useQuery('/data', async () => {
    const response = await API.get(`/data`)
    return response.data
  })
 
  return { data, isLoading, error }
}

// 데이터 요청 완료 전
{
	data: undefined,
	isLoading: true,
	error: null
}
 
// 정상적으로 데이터 요청 완료
{
	data: { name: 'Maeng' },
	isLoading: false,
	error: null
}

describe('useFetchData', () => {
  it('fetch data', async () => {
    const { result, waitFor } = renderHook(() => useFetchData(), {
      wrapper: createQueryWrapper(),
    })
 
    await waitFor(() => !result.current.isLoading)
    expect(result.current.data?.name).not.toBe(undefined)
  })
})

// React-query를 위한 Wrapper 컴포넌트 생성
const createQueryWrapper = () => {
  const testQueryClient = createTestQueryClient()
  const Wrapper = ({ children }: { children }) => (
    <QueryClientProvider client={testQueryClient}>{children}</QueryClientProvider>
  )
  return Wrapper
}

describe('useFetchData', () => {
  it('fetch data', async () => {
    mock.onGet('/data').reply(200, { name: 'Maeng' })
 
    const { result, waitFor } = renderHook(() => useGetBankList(), {
      wrapper: createQueryWrapper(),
    })
 
    await waitFor(() => !result.current.isLoading)
    expect(result.current.data.name).toBe('Maeng')
  })
})

const Button = () => {
  const navigate = useNavigate()
 
  const onClick = () => {
    navigate('/')
  }
  return <button onClick={onClick}>버튼</button>
}

// React-router-dom을 위한 Wrapping
const renderWithRouter = (children) => {
  return {
    ...render(<MemoryRouter>{children}</MemoryRouter>
    )
  };

// useNavigate 모킹
const mockedNavigator = jest.fn()
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useNavigate: () => mockedNavigator,
}))
 
describe('Button', () => {
  it('renders Button', () => {
    const { getByText } = renderWithRouter(<Button />)
    expect(getByText('버튼')).toBeInTheDocument()
    fireEvent.click(button)
    expect(mockedNavigator).toBeCalledTimes(1)
  })
})

const renderWithRouter = (renderComponent, route) => {
  const history = createMemoryHistory();
 
  if (route) {
    history.push(route);
  }
 
  return {
    ...render(
      <HistoryRouter history={history}>
        <Routes>{renderComponent()}</Routes>
      </HistoryRouter>
    ),
    history,
  };

describe('Button', () => {
  it('renders Button', () => {
    const { getByText, history } = renderWithRouter(
      () => (
        <>
          <Route path="/test" element={<Button />} />
          <Route path="/" element={<div />} />
        </>
      ),
      '/test',
    )
    expect(getByText('버튼')).toBeInTheDocument()
    fireEvent.click(button)
    await waitFor(() => {
      expect(history.location.pathname).toEqual('/')
    })
  })
})

const UpdatePage = () => {
  const { id } = useParams()
  const navigate = useNavigate()
  const { data, error, isLoading, isError } = useFetchData(id)
  const { mutateAsync, isLoading: isMutating } = useUpdateData()
 
  const onFormSubmit = async (formData) => {
    await mutateAsync({ ...formData, id })
    navigate('/')
  }
 
  if (isLoading) {
    return <div data-testid="loader">Loading</div>
  }
 
  if (isError) {
    return <div>Error: {error.message}</div>
  }
 
  return (
    <div>
      <h1>Update Data</h1>
      <DataForm defaultValues={data} onFormSubmit={onFormSubmit} isLoading={isMutating} />
    </div>
  )
}

jest.mock('./useFetchData', () => ({
  useFetchData: jest.fn(),
}))
 
jest.mock('./useUpdateData', () => ({
  useUpdateData: jest.fn(),
}))
 
jest.mock('./DataForm', () => ({
  DataForm: jest.fn(),
}))
 
describe('UpdatePage', () => {
  beforeEach(() => {
    useFetchData.mockImplementation(() => ({}))
    useUpdateData.mockImplementation(() => ({}))
    DataForm.mockImplementation(() => null)
  })
  it('fetches the data for the given id', () => {
    renderWithRouter(() => <Route path=":id" element={<UpdatePage />} />, '/test-id')
    expect(useFetchData).toHaveBeenCalledWith('test-id')
  })
 
  describe('while loading', () => {
    it('renders a loader', () => {
      useFetchData.mockImplementation(() => ({
        isLoading: true,
      }))
 
      const { getByTestId } = renderWithRouter(
        () => <Route path=":id" element={<UpdatePage />} />,
        '/test-id',
      )
      expect(getByTestId('loader')).toBeTruthy()
    })
  })
 
  describe('with an error', () => {
    it('renders an error message', () => {
      useFetchData.mockImplementation(() => ({
        isError: true,
        error: { message: 'Something went wrong' },
      }))
 
      const { container } = renderWithRouter(
        () => <Route path=":id" element={<UpdatePage />} />,
        '/test-id',
      )
      expect(container.innerHTML).toMatch('Error: Something went wrong')
    })
  })
 
  describe('with data', () => {
    it('renders the update page title and the data form', () => {
      useFetchData.mockImplementation(() => ({
        data: { foo: 'bar' },
      }))
 
      const { container } = renderWithRouter(
        () => <Route path=":id" element={<UpdatePage />} />,
        '/test-id',
      )
      expect(container.innerHTML).toMatch('Update Data')
      expect(DataForm).toBeCalledWith(
        expect.objectContaining({
          defaultValues: { foo: 'bar' },
        }),
        {},
      )
    })
 
    describe('on data form submit', () => {
      it('updates the data and navigates to the root page', async () => {
        DataForm.mockImplementation(({ onFormSubmit }) => (
          <button onClick={() => onFormSubmit({ foo: 'bar' })}>Submit</button>
        ))
        const mutateAsync = jest.fn()
 
        useUpdateData.mockImplementation(() => ({ mutateAsync }))
 
        const { getByText, history } = renderWithRouter(
          () => (
            <>
              <Route path=":id" element={<UpdatePage />} />
              <Route path="/" element={<div />} />
            </>
          ),
          '/test-id',
        )
 
        fireEvent.click(getByText('Submit'))
 
        expect(mutateAsync).toHaveBeenCalledWith({
          foo: 'bar',
          id: 'test-id',
        })
 
        await waitFor(() => {
          expect(history.location.pathname).toEqual('/')
        })
      })
    })
  })
})