question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useEffect callback isn't executed in `react-test-renderer`'s `create()`

See original GitHub issue

Do you want to request a feature or report a bug? Report a bug

What is the current behavior? The callback provided to useEffect is not executed when the component is rendered.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

  1. Set up useEffect in a component that sets up a listener for events external to the component.
  2. Write a test that expects a triggered event to be processed. The event listener will never have been set up.

See codesandbox. (Also demonstrated in this github repo, though that example is more complex and depends on socket.io-client)

What is the expected behavior? The useEffect contents are executed, setting up a listener that can be triggered later in a test.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

  • React 16.8.3
  • React-test-renderer 16.8.6 Unknown whether this worked in previous versions.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

6reactions
threepointonecommented, Apr 5, 2019

I had to fix your code a little, but there were 2 major issues -

  • you should wrap your create() call with act() to flush effects
  • you were using act from react-dom/test-utils instead of from TestRenderer. This is our fault, we haven’t specified in our docs that act() is renderer specific. I’ll fix that soon.

Here’s a fixed version of your code where the tests pass https://codesandbox.io/s/94jq8rkx4 . Closing this issue, but let me know if you have any other problems.

3reactions
dennishansencommented, Jul 25, 2019

Hi, just had this issue, didn’t realize act was necessary until reading the FAQ about hooks concerning testing. I think it would be helpful to add docs on act here: https://reactjs.org/docs/test-renderer.html

Read more comments on GitHub >

github_iconTop Results From Across the Web

React useState hook (and useEffect) not working in callback ...
React guarantees that setState function identity is stable and won't change on re-renders. This is why it's safe to omit from the useEffect...
Read more >
Test Renderer - React
Overview. This package provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the...
Read more >
Understanding Act function | React Native Testing Library
Asynchronous code​. Asynchronous version of act also is executed immediately, but the callback is not yet completed because of some asynchronous operations ...
Read more >
API Reference | React Hooks Testing Library
Renders a test component that will call the provided callback , including any ... Effects created using useEffect or useLayoutEffect are also not...
Read more >
Don't useEffect as callback! - Johannes Kettmann
The useEffect hook in React is sometimes not easy to understand. It can be hard to get it working properly. You might have...
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