Mounted wrapper was not wrapped in act(...) warning

[joemitchard]

Current behaviour

I have a component that makes use of the useEffect hook to make an asynchronous call an api (or in the test case a mock of a call to an api) and then call the setState hook with the result.

I've written tests that assert on the outcome of the effect (ie content being returned from the api). I'm using v1.11.2 of the adapter for react-16 my tests pass, snapshots are created and everything appears to be working well, however, a warning is repeatedly logged out from react-dom.

Here's the test in question:

    it("should render a link block when the api responds with content", () => {
        const linkBlockResponse = {
            title: "Useful links",
            links: [
                {
                    title: "Book a flight",
                    description: "for your next trip",
                    image: {
                        url: "www.someimage.com",
                        name: "some image"
                    },
                    link: {
                        url: "www.google.com",
                        name: "google",
                        target: "_blank",
                    }
                },
                {
                    title: "Gates & Time",
                    description: "Departures & Arrivals",
                    image: {
                        url: "www.someotherimage.com",
                        name: "some other image"
                    },
                    link: {
                        url: "www.google.com",
                        name: "google",
                        target: "_blank",
                    }
                },
            ]
        } as LinkBlock;

        const apiResponse = {
            content: linkBlockResponse
        } as ContentResponse<LinkBlock>;

        const apiMock = jest.fn((id: number) => Promise.resolve(apiResponse));

        const wrapper = enzyme.mount(<LinkBlockComponent id={1} getLinkBlock={apiMock} />);

        return Promise
            .resolve(wrapper)
            .then(() => {
                wrapper.update();
                expect(apiMock).toHaveBeenCalledWith(1);
                expect(wrapper).toMatchSnapshot();
                expect(wrapper.find(LinkBlockHeaderComponent)).toHaveLength(1);
                expect(wrapper.find(LinkBlockLinksComponent)).toHaveLength(1);
            });
    });

Here's the warning:

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

I've attempted wrapping the call to enzyme.mount(<LinkBlockComponent id={1} getLinkBlock={apiMock} />); in an act block, and asserting afterwards as the warning suggests but this ends up calling all my tests before the component has finished rendering.

I don't suspect this is an issue caused enzyme or the adapter itself as I've noticed that you are wrapping mount calls within an act() block further down, however, I've struggled to find any documentation from enzyme on testing the effect of useEffect.

If you have any suggestions on best practices here or if anything looks amiss, help would be appreciated.

Expected behaviour

Your environment

API

• shallow
• mount
• render

Version

library	version
enzyme	3.9.0
react	16.8.4
react-dom	16.8.4
react-test-renderer	n/a
adapter (below)	1.11.2

Adapter

• enzyme-adapter-react-16
• enzyme-adapter-react-16.3
• enzyme-adapter-react-16.2
• enzyme-adapter-react-16.1
• enzyme-adapter-react-15
• enzyme-adapter-react-15.4
• enzyme-adapter-react-14
• enzyme-adapter-react-13
• enzyme-adapter-react-helper
• others ( )

[adams-brian]

I just stumbled on this issue while looking into this StackOverflow question.

The warning seems to be triggered by asynchronous calls to setData triggered by a useEffect function.

Here is an extremely simple Jest test demonstrating the problem:

import React, { useState, useEffect } from 'react';
import { mount } from 'enzyme';

const SimpleComponent = () => {
  const [data, setData] = useState('initial');

  useEffect(() => {
    setImmediate(() => setData('updated'));
  }, []);

  return (<div>{data}</div>);
};

test('SimpleComponent', done => {
  const wrapper = mount(<SimpleComponent/>);
  setImmediate(done);
});

...which results in this warning:

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

[tomaszwylezekperform]

I'm having the same problem :(

[eps1lon]

@brian-lives-outdoors That specific issue can be resolved by wrapping jest.runAllImmediates in act.

[threepointone]

Do you have a git repo where I can try this out?

FYI, we just released an alpha (https://github.com/facebook/react/releases/tag/v16.9.0-alpha.0) with an async version of act() that should make this simpler to handle.

[tarikhamilton]

I'm getting this for the very first time as well. I'm just testing onBlur, onChange, etc. The only thing different from any other tests is that I'm testing something that uses React.useState (checking for a class to be toggled).

I'm guessing this will be resolved when React hooks are supported in Enzyme.

My tests still work.

[ljharb]

@threepointone fwiw, it's actually a problem that act throws if you provide a return value (presumably in your alpha, a non-promise return value) - that's why i can't use it on the shallow renderer.

Separately, the next release of enzyme should address this issue (#2073).

[threepointone]

I wouldn’t expect act to work with shallow renderer anyway (or for it to even have the warning, because shallow renderer doesn’t do updates I think?) can any of you share a repo with a failing test that I could have a look at?

[ljharb]

@threepointone that's part of a longer conversation, i think - the shallow renderer doesn't do updates, but enzyme's shallow does.

[threepointone]

The thing is, act() is renderer specific (there’s one each for test-utils, test-renderer, and the noop-renderers.) there isn’t one for the shallow-renderer because we don’t do updates or effects for it. I’m curious to see how you’d get the warning, hence asking for a failing test repro. Maybe it would still ‘work’ because of its internals, but I can’t be sure without seeing. Lemme know if you’d like me to have a look.

[ljharb]

we're using the one from test-utils atm, for mount. I was trying to use the same one for shallow, not realizing it was renderer-specific. It didn't work because it required a DOM, and shallow must work in a node environment.

[joemitchard]

@threepointone I'm afraid the code is in a private repo belonging to my work so I can't share it. I'm currently on holiday, however, I'll try and replicate the issue in a codepen or something next week.

[ljharb]

This is addressed by #2034, so I'm going to close it - it will be in the next release.

[trollepierre]

when will be the next release? My team is waiting for this fix for one month already...
thx guys