useEffect not triggering inside jest

See original GitHub issue
  • react-testing-library version: 5.2.3
  • react version: 16.7.0-alpha.0
  • node version: CodeSandbox
  • npm (or yarn) version: CodeSandbox

Relevant code or config:

  let a = false;
  function Test() {
    React.useEffect(() => {
      a = true;
    });
    return <div>Hello World</div>;
  }
  render(<Test />);
  expect(a).toBe(true);

What you did:

I’m trying to test functions with the useEffect hook inside jest.

What happened:

The useEffect hook is not executed correctly inside a jest environment after calling render(<Test />). However it appears to be working correctly if it is called directly in a browser environment.

Reproduction:

Working example: https://codesandbox.io/s/l947z8v6xq (index.js) Not working example in jest: https://codesandbox.io/s/7k5oj92740 (index.test.js)

Problem description:

The useEffect hook should have been executed after the render call

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:14
  • Comments:32 (16 by maintainers)

github_iconTop GitHub Comments

22reactions
sivkoffcommented, Nov 3, 2018

That’s because React doesn’t run the hook in sync mode. If you rerender the component the second time, it changes a to true: https://codesandbox.io/s/m5m5yqrr18

13reactions
ivan-kleshnincommented, Nov 23, 2018

For some reason, this workaround:

beforeAll(() => 
  console.log("@ beforeAll")
  jest.spyOn(React, 'useEffect').mockImplementation(React.useLayoutEffect)
)
afterAll(() => React.useEffect.mockRestore())

changes nothing to my Jest tests, effects just never happen. Only manual replacement of useEffect with useLayoutEffect in components does the trick. I know it’s not a QA thread, but maybe other people are experiencing the same… so any help will be appreciated.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Function call inside useEffect not firing in jest test
I have a component that, on button click sends the updated value to parent via props.OnValChange . This is implemented in the useEffect...
Read more >
useEffect – How to test React Effect Hooks - cultivate
Learn how to test a useEffect hook, how to handle infinite rendering loops, how to deal with a not wrapped in act(..) warning,...
Read more >
Understanding Act function | React Native Testing Library
When testing without act call wrapping rendering call, we see that the assertion runs just after the rendering but before useEffect hooks effects...
Read more >
Guide of Testing React Components with Hooks & Mocks
Having strong unit tests prevents future emergencies, urgent bug fixes, ... useEffect is not supported by Enzyme's shallow rendering. jest.
Read more >
Testing Recipes - React
This page assumes you're using Jest as a test runner. ... Some modules might not work well inside a testing environment, or may...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found