@testing-library/react-native#waitFor TypeScript Examples

The following examples show how to use @testing-library/react-native#waitFor. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: CodeInput.spec.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
describe('CodeInput', () => {
  const changeMock = jest.fn();
  let componentQuery: any;

  beforeEach(async () => {
    componentQuery = await waitFor(() =>
      render(
        <StorageServiceProvider>
          <ThemeProvider>
            <CodeInput value="" onChange={changeMock} accessibilityLabel="codeInput" />
          </ThemeProvider>
        </StorageServiceProvider>,
      ),
    );
  });

  afterEach(() => {
    jest.clearAllMocks();
    jest.resetAllMocks();
  });

  it('returns trimmed text', async () => {
    const textInput = componentQuery.getByTestId('textInput');
    fireEvent.changeText(textInput, ' MYSECRETCODE ');
    expect(changeMock).toHaveBeenCalledWith('MYSECRETCODE');
  });

  // eslint-disable-next-line jest/no-commented-out-tests
  /* TODO: uncomment after https://github.com/cds-snc/covid-alert-app/pull/844 is merged
  it('disallows special characters on input', () => {
    const changeMock = jest.fn();
    const textInput = componentQuery.getByHintText('codeInput');
    fireEvent.changeText(textInput, ' MY?SECRETCODE ');
    expect(changeMock).toBeCalledWith('MYSECRETCODE');
  });
  */
});
Example #2
Source File: CreditCardForm.test.tsx    From rn-credit-card with MIT License 6 votes vote down vote up 
it('validates credit card number', async () => {
  const { queryByText, getByTestId } = get.render()

  // does not display validation message until input is filled
  const cardInput = getByTestId('TextField.cardNumber')
  fireEvent.changeText(cardInput, '55555555')
  await waitFor(() => {
    expect(queryByText(/This card number looks invalid./)).toBeNull()
  })

  // invalid card
  fireEvent.changeText(cardInput, '5555555555554440')
  await waitFor(() => {
    expect(queryByText(/This card number looks invalid./)).not.toBeNull()
  })

  // valid card
  fireEvent.changeText(cardInput, '5555 5555 5555 4444')
  await waitFor(() => {
    expect(queryByText(/This card number looks invalid./)).toBeNull()
  })
})
Example #3
Source File: CreditCardForm.test.tsx    From rn-credit-card with MIT License 6 votes vote down vote up 
it('validates expiration date', async () => {
  const { queryByText, getByTestId } = get.render()

  const input = getByTestId('TextField.expiration')
  // passed expiration date
  fireEvent.changeText(input, '1018')
  await waitFor(() =>
    expect(queryByText(/This expiration date looks invalid./)).not.toBeNull(),
  )

  // valid date
  fireEvent.changeText(input, '10/23')
  await waitFor(() =>
    expect(queryByText(/This expiration date looks invalid./)).toBeNull(),
  )
})
Example #4
Source File: CreditCardForm.test.tsx    From rn-credit-card with MIT License 6 votes vote down vote up 
it('validates cvv', async () => {
  const { queryByText, getByTestId } = get.render()

  const input = getByTestId('TextField.cvv')
  // invalid input
  fireEvent.changeText(input, '4444')
  await waitFor(() =>
    expect(queryByText('This security code looks invalid.')).not.toBeNull(),
  )

  // valid input
  fireEvent.changeText(input, '333')
  await waitFor(() =>
    expect(queryByText('This security code looks invalid.')).toBeNull(),
  )
})
Example #5
Source File: CreditCardForm.test.tsx    From rn-credit-card with MIT License 6 votes vote down vote up 
it('submits the form', async () => {
  const { getByText, getByTestId } = get.render()

  fireEvent.changeText(getByTestId('TextField.holderName'), 'Halil Bilir')
  fireEvent.changeText(getByTestId('TextField.cardNumber'), '5555555555554444')
  fireEvent.changeText(getByTestId('TextField.expiration'), '0224')
  fireEvent.changeText(getByTestId('TextField.cvv'), '333')

  fireEvent.press(getByText('Submit'))

  await waitFor(() =>
    expect(get.onSubmit).toHaveBeenLastCalledWith({
      holderName: 'Halil Bilir',
      // cardNumber and expiration are now formatted
      cardNumber: '5555 5555 5555 4444',
      expiration: '02/24',
      cvv: '333',
    }),
  )
})