React-testing-library: Where is flushEffects documented ?

[gaurav5430]

• react-testing-library version: 6.0.0
• react version: 16.8.4
• node version: 8.14.1
• npm (or yarn) version: 6.2.0

Relevant code or config:

var your => (code) => here;

What you did:

I am trying to use flushEffects to test components with useEffect

What happened:

jest says _ReactTestingLibrary.flushEffects is not a function

Reproduction:

Problem description:

It would be great if it is documented somewhere, so i can understand how to use it and which version of react-testing-library supports flushEffects

Suggested solution:

[gaurav5430]

Ok, found this:
https://github.com/kentcdodds/react-testing-library/commit/8e08ccff2f14aa455a8e2881bf554e5381caf171

it says, flushEffects is removed as it is no longer necessary

[gaurav5430]

ok, it seems like it has been removed and we should use act.

I am expecting a callback to be called after first render
should I just render inside act ?

const { queryByTestId, getByText } = act(() => render(<EvaluationDetails {...props} />) );

[gaurav5430]

Ok, it seems render would call ReactDOM.render inside act anyway, so no need to wrap my render calls in act.

but I am still getting warnings:

Warning: An update to EvaluationDetails 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-tes
in EvaluationDetails

[gaurav5430]

Warnings issue is covered here:
https://github.com/kentcdodds/react-testing-library/issues/281

But i would still like to see some documentation for act/flushEffects
Some of @kentcdodds old videos still refer to flushEffects and it is not completely obvious by just looking at the docs that it has been removed/replaced

[abdellah-el-mennani]

I have same issue and I haven't resolved it yet

[gaurav5430]

you mean you were not able to get rid of the warnings, even though your tests pass?
or are your tests failing because of this ?

[abdellah-el-mennani]

no my test doesn't pass. the component that I'm trying to test uses useEffect hook

[gaurav5430]

umm, in my case, my tests pass, just that the warning is still displayed.
May be you have another issue with your tests?

These are my observations:

1. You do not need to wrap your test code in act, as RTL would already do that for you, both for initial render and fireEvent.
2. You may have been changing your component outside of these use cases, in which case you might need to wrap that in act.

codesandbox/example ?

[abdellah-el-mennani]

this is the code, even I use act the test fails :

[gaurav5430]

what happens without act ?
fireEvent should already wrap your calls in act , so you shouldn't need to

[abdellah-el-mennani]

it fails, even if I use wait and waitForElement

[gaurav5430]

In my use case, i wait for an element to appear using waitForElement and then do my assertions.
If i don't wait, then the assertion is called before the state changes, which is expected I would say.

[abdellah-el-mennani]

thank u very much. my bad the problem is in my implementation

[mrc535s]

Having a similiar issue and wondering if there are best practices around how to test useEffect with a fetch call when the component is loading. I have tried many ways, but can't seem to get it working correctly. Basically I have a form that preloads data in useEffect if there is an id in the route. There will then be an Update button that is available to click and update the data.

it('should update values when required fields are populated and update is clicked', async () => {
const props = {
match: {
params: {
id: 1
}
}
};

nockGets(config); //nock for get request for route loaded
const { getByText } = render();
const updateButton = await waitForElement(() => getByText('Update'));
fireEvent.click(updateButton);
expect(true).toBeTruthy(); //just a basic test
...

Obviously this test passes, but getting an error when trying to actually find what I expect and getting this warning in the logs

Warning: An update to CreateForm 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 */

I have tried wrapping in act, but got errors around trying to perform async in act wasn't allowed. In the end I am just trying to see how this simple use case has been solved for around making an http request in useEffect as I am sure I am missing something simple.

[alexkrolick]

See #281 for issues with async calls in act

Closing because the original issue (flushEffects) is resolved