fireEvent.blur() does not work as expected.

[SocialBrothersDEV]

• react-native
• native-testing-library version: 5.0.3
• jest-preset: @testing-library/react-native
• react-native version: 0.61.5
• node version: 10.16.0

Relevant code or config:

// jest.config.js
const jestPreset = require('@testing-library/react-native/jest-preset');

module.exports = {
  preset: '@testing-library/react-native',
  roots: ['<rootDir>/src'],
  setupFiles: [
    ...jestPreset.setupFiles,
    './node_modules/react-native-gesture-handler/jestSetup.js',
    './jest.setup.js',
  ],
  setupFilesAfterEnv: ['@testing-library/react-native/cleanup-after-each'],
  transformIgnorePatterns: [
    'node_modules/(?!(react-native|react-navigation|@react-navigation|@react-native-community|@fortawesome))',
  ],
};

What you did:

I tried to fireEvent.blur() on an input field.

What happened:

Gives the following error:

    console.error node_modules/react-native/Libraries/YellowBox/YellowBox.js:63
      Warning: An update to Formik inside a test was not wrapped in act(...).

      When testing, code that causes React state updates should be wrapped into act(...):

      act(() => {
        /* fire events that update state */
      });
      /* assert on the output */

      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
          in Formik (created by RegisterScreen)
          in RegisterScreen
          in View (created by View)
          in View (created by AppContainer)
          in View (created by View)
          in View (created by AppContainer)
          in AppContainer (at src/index.js:26)

Reproduction:

• Create a form with Formik
• Write a test that queries for a TextInput field, changes text, calls blur.

Problem description:

Whenever you fire a blur event on a textinput field, you'll get an error message by Formik (i think): Warning: An update to Formik inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...):

When i manually wrap the blur() in an act(), it still gives me the same error message. The other fireEvent functions im using are functioning as expected, except this one.

Suggested solution:

It has something to do with the act(). Docs state it should be applied automatically to all fireEvent functions, but im getting this error message. Even if i manually wrap it with act().

[mateussmohamed]

same problem here.

[SocialBrothersDEV]

Any progress/update on this? Its currently preventing me to properly write tests for like 70% of my components..

[TAGraves]

Hi @SocialBrothersDEV!

My guess is that this is related to https://github.com/jaredpalmer/formik/issues/1543. I believe these Formik callbacks are asynchronous. Have you tried wrapping your blur fireEvent in async act ala https://github.com/jaredpalmer/formik/issues/1543#issuecomment-547501926?

If that doesn't work, a repository that reproduces the error will help me debug this.

[margaridaDinis]

This is not really an issue. It is happening because you are probably updating the state on blur but are not telling jest when to resume testing after it changes. This is an example with changeText, just so it's more clear. But it works the same way with blur.

  it('changes value ', async() => {
    const { queryByTestId } = render(<SomeForm />);

    fireEvent.changeText(queryByTestId('example'), 'hello');

    await wait(() => {
      expect(queryByTestId('example').getProp('value')).toBe('hello'); // what state changed, in this case the value of the input
    });
  });

[thymikee]

FYI, this repository is no longer responsible for this package. See the migration guide to v7.0 and check if it happens there as well.