Creating scalable, testable, and readable React apps: Part 3 Test examples

Tests.jsx

/**
 * Component Test
 */
describe('CharacterCreateForm', () => {
  it('should not submit form and show error message if name is null', async () => {
    const onSubmitMock = jest.fn()
    const { getByTestId, queryByTestId } = render(
      <CharacterCreateForm onSubmit={onSubmitMock} />
    )
    const submitButton = getByTestId('form-submit-button')
    expect(queryByTestId('name-error-message')).not.toBeInTheDocument()

    userEvent.click(submitButton)
    expect(onSubmitMock).not.toHaveBeenCalled()

    expect(getByTestId('name-error-message')).toBeInTheDocument()
  })
})

/**
 * Container Test
 */
describe('CharacterListContainer', () => {
  beforeEach(() => mock.setup());

  afterEach(() => mock.teardown());

  it('fetches information about characters on render', async () => {
    const mockGetCharacters = jest.fn((_, res) => {
      return res.status(200).body(mockedCharacters);
    });

    mock.get('/characters', mockGetCharacters);

    renderConnectedComponent(<CharacterListContainer createCharacterPath="/characters/new" />);

    await waitFor(() => expect(mockGetCharacters).toHaveBeenCalledTimes(1));
  });
});