Ggtcf

Print a physical multiplication table

How to get the n-th line after a grepped one?

Python if-else code style for reduced code for rounding floats

Different outputs for `w`, `who`, `whoami` and `id`

How are passwords stolen from companies if they only store hashes?

New passport but visa is in old (lost) passport

How to terminate ping <dest> &

PTIJ: Who should I vote for? (21st Knesset Edition)

et qui - how do you really understand that kind of phraseology?

Are Roman Catholic priests ever addressed as pastor

Is it insecure to send a password in a `curl` command?

Does multi-classing into Fighter give you heavy armor?

Is there a hypothetical scenario that would make Earth uninhabitable for humans, but not for (the majority of) other animals?

About the actual radiative impact of greenhouse gas emission over time

Knife as defense against stray dogs

Why do tuner card drivers fail to build after kernel update to 4.4.0-143-generic?

How do I hide Chekhov's Gun?

Could the Saturn V actually have launched astronauts around Venus?

Is there a place to find the pricing for things not mentioned in the PHB? (non-magical)

Is it true that good novels will automatically sell themselves on Amazon (and so on) and there is no need for one to waste time promoting?

This word with a lot of past tenses

If I am holding an item before I cast Blink, will it move with me through the Ethereal Plane?

When to use a slotted vs. solid turner?

How to write cleanly even if my character uses expletive language?

Testing React components that fetches data using Hooks

0

My React-application has a component that fetches data to display from a remote server. In the pre-hooks era, componentDidMount() was the place to go. But now I wanted to use hooks for this.

const App = () => 
 const [ state, setState ] = useState(0);
 useEffect(() => 
 fetchData().then(setState);
 );
 return (
 <div>... data display ...</div>
 );
;

And my test using Jest and Enzyme looks like this:

import React from 'react';
import mount from 'enzyme';
import App from './App';
import act from 'react-test-renderer';

jest.mock('./api');

import fetchData from './api';

describe('<App />', () => 
 it('renders without crashing', (done) => 
 fetchData.mockImplementation(() => 
 return Promise.resolve(42);
 );
 act(() => mount(<App />));
 setTimeout(() => 
 // expectations here
 done();
 , 500);
 ); 
);

The test succeeds, but it logs a few warnings:

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

The only update to the App component happens from the Promise callback. How can I ensure this happens within the act block? The docs clearly suggest to have assertions happen outside the act block. Besides, putting them inside doesn't change the warning.

reactjs jestjs enzyme react-hooks react-test-renderer

share|improve this question

edited Mar 7 at 15:40

skyboyer

4,08311230

asked Mar 7 at 15:35

mthmuldersmthmulders

7,33411741

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  This code will call fetchData twice or go to an infinite loop if fetchData returns different data. You should pass [] as second argument to useEffect to emaulate componentDidMount. Otherwise useEffect will be called on every render. First fetchData causes a rerender. And it will cause additional renders whenever setState gets a new value.
  
  – UjinT34
  Mar 7 at 15:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  github.com/kentcdodds/react-testing-library/issues/… seems like such cases are under discussion
  
  – skyboyer
  Mar 7 at 15:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm not sure but github.com/threepointone/react-act-examples looks promising
  
  – skyboyer
  Mar 7 at 16:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks @UjinT34 for the remark. In fact, I had [] as deps, but figured it wasn't relevant for this particular question. Indeed, it should be there to prevent invoking fetchData too often. Still, the warning about not using act is there :(
  
  – mthmulders
  Mar 8 at 7:18
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for the suggestion @skyboyer. The point with the repo you refer to is that they use "manual" mocks, which they can manually resolve - inside an act statement. I prefer to use Jests mocking possibilities instead. My feeling is that resolving the Promise from the Jest mock happens outside act, thus triggering the warning. But I don't know how to fix that.
  
  – mthmulders
  Mar 8 at 7:22
  

  
  
  
  

add a comment | 

0

My React-application has a component that fetches data to display from a remote server. In the pre-hooks era, componentDidMount() was the place to go. But now I wanted to use hooks for this.

const App = () => 
 const [ state, setState ] = useState(0);
 useEffect(() => 
 fetchData().then(setState);
 );
 return (
 <div>... data display ...</div>
 );
;

And my test using Jest and Enzyme looks like this:

import React from 'react';
import mount from 'enzyme';
import App from './App';
import act from 'react-test-renderer';

jest.mock('./api');

import fetchData from './api';

describe('<App />', () => 
 it('renders without crashing', (done) => 
 fetchData.mockImplementation(() => 
 return Promise.resolve(42);
 );
 act(() => mount(<App />));
 setTimeout(() => 
 // expectations here
 done();
 , 500);
 ); 
);

The test succeeds, but it logs a few warnings:

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

The only update to the App component happens from the Promise callback. How can I ensure this happens within the act block? The docs clearly suggest to have assertions happen outside the act block. Besides, putting them inside doesn't change the warning.

reactjs jestjs enzyme react-hooks react-test-renderer

share|improve this question

edited Mar 7 at 15:40

skyboyer

4,08311230

asked Mar 7 at 15:35

mthmuldersmthmulders

7,33411741

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  This code will call fetchData twice or go to an infinite loop if fetchData returns different data. You should pass [] as second argument to useEffect to emaulate componentDidMount. Otherwise useEffect will be called on every render. First fetchData causes a rerender. And it will cause additional renders whenever setState gets a new value.
  
  – UjinT34
  Mar 7 at 15:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  github.com/kentcdodds/react-testing-library/issues/… seems like such cases are under discussion
  
  – skyboyer
  Mar 7 at 15:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm not sure but github.com/threepointone/react-act-examples looks promising
  
  – skyboyer
  Mar 7 at 16:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks @UjinT34 for the remark. In fact, I had [] as deps, but figured it wasn't relevant for this particular question. Indeed, it should be there to prevent invoking fetchData too often. Still, the warning about not using act is there :(
  
  – mthmulders
  Mar 8 at 7:18
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for the suggestion @skyboyer. The point with the repo you refer to is that they use "manual" mocks, which they can manually resolve - inside an act statement. I prefer to use Jests mocking possibilities instead. My feeling is that resolving the Promise from the Jest mock happens outside act, thus triggering the warning. But I don't know how to fix that.
  
  – mthmulders
  Mar 8 at 7:22
  

  
  
  
  

add a comment | 

My React-application has a component that fetches data to display from a remote server. In the pre-hooks era, componentDidMount() was the place to go. But now I wanted to use hooks for this.

const App = () => 
 const [ state, setState ] = useState(0);
 useEffect(() => 
 fetchData().then(setState);
 );
 return (
 <div>... data display ...</div>
 );
;

And my test using Jest and Enzyme looks like this:

import React from 'react';
import mount from 'enzyme';
import App from './App';
import act from 'react-test-renderer';

jest.mock('./api');

import fetchData from './api';

describe('<App />', () => 
 it('renders without crashing', (done) => 
 fetchData.mockImplementation(() => 
 return Promise.resolve(42);
 );
 act(() => mount(<App />));
 setTimeout(() => 
 // expectations here
 done();
 , 500);
 ); 
);

The test succeeds, but it logs a few warnings:

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

The only update to the App component happens from the Promise callback. How can I ensure this happens within the act block? The docs clearly suggest to have assertions happen outside the act block. Besides, putting them inside doesn't change the warning.

reactjs jestjs enzyme react-hooks react-test-renderer

share|improve this question

edited Mar 7 at 15:40

skyboyer

4,08311230

asked Mar 7 at 15:35

mthmuldersmthmulders

7,33411741

const App = () => 
 const [ state, setState ] = useState(0);
 useEffect(() => 
 fetchData().then(setState);
 );
 return (
 <div>... data display ...</div>
 );
;

import React from 'react';
import mount from 'enzyme';
import App from './App';
import act from 'react-test-renderer';

jest.mock('./api');

import fetchData from './api';

describe('<App />', () => 
 it('renders without crashing', (done) => 
 fetchData.mockImplementation(() => 
 return Promise.resolve(42);
 );
 act(() => mount(<App />));
 setTimeout(() => 
 // expectations here
 done();
 , 500);
 ); 
);

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

share|improve this question

edited Mar 7 at 15:40

skyboyer

4,08311230

asked Mar 7 at 15:35

mthmuldersmthmulders

7,33411741

share|improve this question

edited Mar 7 at 15:40

skyboyer

4,08311230

asked Mar 7 at 15:35

mthmuldersmthmulders

7,33411741

edited Mar 7 at 15:40

skyboyer

4,08311230

edited Mar 7 at 15:40

skyboyer

4,08311230

asked Mar 7 at 15:35

mthmuldersmthmulders

7,33411741

asked Mar 7 at 15:35

mthmuldersmthmulders

7,33411741