Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TestUtils.renderIntoDocument returns null when valid functional component passed. #15370

DeividasBakanas opened this issue Apr 10, 2019 · 4 comments


Copy link

@DeividasBakanas DeividasBakanas commented Apr 10, 2019

Do you want to request a feature or report a bug?
I want to report a bug.

What is the current behavior?
Currently when valid functional component is passed to TestUtils.renderIntoDocument it returns a null and raise no error.

This behavior was reproduced in a sandbox:

Check the console, to see TestUtils.renderIntoDocument output of prepared sample components.

Workaround that satisfies both SFC and FC is wrapping component into container:

const FCCounter = () => {
  const [count, setCount] = useState(0);

  return (
      <button onClick={() => setCount(count + 1)}>+1</button>

    <FCCounter />

What is the expected behavior?

  • To render a functional component.
  • In worst case - providing an error.

Which versions of React are affected by this issue?
React version: 16.8.6

Copy link

@threepointone threepointone commented Apr 11, 2019

Functional components don't have any instances, so what would you expect


to return?

Also, broadly, can you explain what you're trying to do? You could use forwardRef/useImperativeHandle ( to get access to internal 'methods', but I'm curious what you're trying to test at all.

Copy link

@DeividasBakanas DeividasBakanas commented Apr 12, 2019

After calling TestUtils.renderIntoDocument with classic component, I am fully enabled to reach it’s state, props and manipulate the component using setState. So, what I expected TestUtils.renderIntoDocument to return is some object allowing me to use state, props and setState.

I am trying to test components that are implemented as functional components. The main objective is to change component’s state and check if changed state match the state expected by the test.

In case of testing I have a precondition, that components should be tested as is and should not be altered to contain the code specifically for testing purposes. So, changing component itself to use forwardRef/useImperativeHandle is not an option.

Copy link

@trueadm trueadm commented Apr 13, 2019

@DeividasBakanas Function components do not have instances. You could trigger the button, which would update state via dispatching an event. In my opinion this is also a better approach than trying to imperatively update the instance returned from TestUtils.renderIntoDocument (in the case of class components).

Copy link

@threepointone threepointone commented Apr 15, 2019

Like @trueadm mentioned, we do not recommend testing implementation details of the component itself, and use props/events to trigger updates, and do assertions on the component output. I could recommend libraries like react-testing-library to make this a bit easier. Kent also writes extensively on the topic, would recommend.

Closing this issue as it's more a usage question rather than a bug/feature request.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants