new act warning since update

[donaldpipowitch]

• react-testing-library version: 9.3.1
• react version: 16.12.0
• node version: 10.16.0
• yarn version: 1.19.1

Relevant code or config:

https://github.com/donaldpipowitch/testing-library-react-act-bug-demo

What you did:

Updated @testing-library/react from 9.3.0 to 9.3.1. Also see #514 (afaik the only change in that version bump).

What happened:

A new warning appeared and I don't know, if this is a bug or not.

Reproduction:

https://github.com/donaldpipowitch/testing-library-react-act-bug-demo

Note that using an "await" somewhere can make the error go away, so this might be some race condition thingy with the event loop.

Problem description:

A new warning appeared and I don't know, if this is a bug or not.

Suggested solution:

If it's not a bug, but intended - everything is fine. If it's a bug, the warning should disappear after the bug fix.

[threepointone]

I'll have a look at this next week.

[ghargrove]

@donaldpipowitch @threepointone I don't have much background info here but I think it's possible that something within formik may be causing this issue?

I encountered the same (or similar?) error (below) when I initially built my form with the formik useFormik hook. As a test I swapped out useFormik with a useState hook and the test stopped throwing the error.

As an additional test I started checking previous versions of @testing-library/react and it appears the issue began w/ 9.3.1. The test did not throw the error while using formik w/ react-testing-library 9.3.0.

Hope that's helpful.

• @testing-library/react version 9.3.2
• @apollo/react-testing version 3.1.3
• react version 16.12.0
• formik version 2.0.6
• node version 12.13.0
• yarn version 1.19.1

console.error node_modules/react-dom/cjs/react-dom.development.js:530
    Warning: An update to Login 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 Login
        in ApolloProvider (created by MockedProvider)
        in MockedProvider

[donaldpipowitch]

but I think it's possible that something within formik may be causing this issue?

Yeah, it's likely. I personally don't know if the warning is correct or a "false negative".

[ghargrove]

@donaldpipowitch My previous comment may not be accurate about it involving formik. After hacking a bit more I was able to get my tests to pass w/o the error being thrown.

My first problem was that I was incorrectly using the apollo mock provider and had the result returning wrong.

Secondly I wasn't calling any of the wait* variations to allow the mocked api request to resolve.

Here was my particular test after I got it fixed. Hope it helps.

import React from 'react';

import { MockedProvider } from '@apollo/react-testing';
import '@testing-library/jest-dom/extend-expect';
import { fireEvent, render, waitForElement } from '@testing-library/react';

import LoginPage, { loginMutation } from './Login';

it('renders a message if the login is not successful', async () => {
  const email = 'baduser@test.com';
  const password = 'badpassword';
  const mocks = [
    {
      request: {
        query: loginMutation,
        variables: {
          email,
          password
        }
      },
      result: { data: { loginUser: null } }
    }
  ]

  const { getByLabelText, getByTestId, getByText } = render(
    <MockedProvider mocks={mocks} addTypename={false}>
      <LoginPage />
    </MockedProvider>
  );
    
  fireEvent.change(getByLabelText('Email:'), {
    target: { value: email },
  });
  fireEvent.change(getByLabelText('Password:'), {
    target: { value: password },
  });
  fireEvent.click(getByText('Login', { selector: 'button' }));

  const messageEl = await waitForElement(() => getByTestId('message'));
  expect(messageEl).toHaveTextContent(
    'Invalid email and/or password'
  );
});

[ghargrove]

@donaldpipowitch as a follow up to my comment above. I added an await to your example repo w/ "@testing-library/react": "^9.3.2", and was able to get the tests to pass

import React from 'react'
import {render, fireEvent, waitForElement} from '@testing-library/react'
import { Formik, Form, useField } from 'formik';

const Input = ({ label, name }) => {
  const [field] = useField(name);

  return (
    <label>
      {label}

      <input {...field} />
    </label>
  );
};

test('formik example', () => {
  const { getByLabelText } = render(
    <Formik
      initialValues={{
        email: ''
      }}
      onSubmit={() => {}}
    >
      <Form>
        <Input name="email" label="Email address" />
      </Form>
    </Formik>
  );

  fireEvent.change(getByLabelText('Email address'), {
    target: { value: 'test@test.de' }
  });

  waitForElement(() => getByLabelText('Email address')).then(el => {
    expect(el).toBeDefined();
    expect(el.value).toEqual('test@test.de');
  })
  
})

[donaldpipowitch]

@ghargrove Sorry that I haven't pointed it out in the description that using an "await" will make this warning go away. I noticed it as well when I initially found the error here: #514 (comment). I'll update the description.

[ghargrove]

I'm fairly confident the issue I was encountering was #224.

After my updates in my previous comment I continued to have tests that would sometimes run without the errors and other times would throw them. I couldn't shake the feeling it was related to formik as they'd stop every time I pulled it out.

I had to tweak my tests a bit but now I've got them running without issues.

One of the biggest things that took me a minute to realize was that my component implementation was doing <div data-testid="message">{error && 'Invalid login'}</div> instead of {error && <div data-testid="message">Invalid login</div>}. Therefore await findByTestId('message') was always resolving before all of the async actions has a chance to take place

[jednano]

I'm getting the same (red) warning on v9.3.2 and even 9.3.0 if I downgrade. Not using formik at all here. The issue appears to be 100% related to a dispatch call within a useEffect.

const Foo: React.FC = () => {
  const [, api] = someContext.use();

  useEffect(() => {
    let didCancel = false;
    api.fetchSomething(() => didCancel);
    return () => {
      didCancel = true;
    };
  }, [api]);

  return null;
};

I even simplified the fetch call to this simple Promise.resolve:

export default async function fetchSomething() {
  return Promise.resolve([]);
}

Still, the same (red) warning.

[AriPerkkio]

+1, seeing this error on 9.40 and 9.32. Downgrading to 9.3.0 fixes the issue. My setup is just react without external dependencies.

[gnapse]

I can confirm that sticking to 9.3.0 makes me not have the warning, while 9.3.1 does.

Things I did:

• Noticed the warning when upgrading to v9.4 from 8.x
• Found this issue and the last comment
• Downgraded to v9.3.0 and the warning disappeared
• Upgraded to 9.3.1 and the message re-appeared

[kentcdodds]

I'm 99% certain that in this case y'all are suffering from the thing I discuss in the appendix of this blog post. TL;DR: act is working properly (as is React Testing Library).

Basically something is happening in some of your component code (or the code of your dependencies) after the test completes. You need to wait for those things to finish before your test completes (or your test is incomplete... no pun intended).

So in the case of @donaldpipowitch's demo, I added a single await wait() as the last line of the test and the error went away. Normally you'll want to have some kind of assertion for what actually happened there, but thanks to the fact that wait is wrapped in act we get the error to go away and if there is a problem, it will be more likely to surface.

Good luck!