DisplayNameField.test.js

import React from 'react'
import { object, string } from 'yup'
import { waitFor, render, fireEvent } from '@testing-library/react'
import { ThemeProvider, theme } from '@chakra-ui/core'
import DisplayNameField from '../DisplayNameField'
import { Formik } from 'formik'
import { I18nProvider } from '@lingui/react'
import { setupI18n } from '@lingui/core'

describe('<DisplayNameField />', () => {
  describe('when validation fails', () => {
    it('displays an error message', async () => {
      const validationSchema = object().shape({
        displayName: string().required('sadness'),
      })

      const { getByTestId, getByText } = render(
        <I18nProvider i18n={setupI18n()}>
          <ThemeProvider theme={theme}>
            <Formik
              // return a sadness error for the display name field
              validationSchema={validationSchema}
              initialValues={{
                displayName: '',
              }}
            >
              {() => (
                <DisplayNameField
                  data-testid="displayNameField"
                  name="displayName"
                />
              )}
            </Formik>
          </ThemeProvider>
        </I18nProvider>,
      )

      const input = getByTestId('displayNameField')
      fireEvent.blur(input)

      await waitFor(() => {
        expect(getByText(/sadness/)).toBeInTheDocument()
      })
    })
  })
})