React: TestUtils.renderIntoDocument returns `null` when valid functional component passed.

Created on 10 Apr 2019 · 4Comments · Source: facebook/react

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.

Demo
This behavior was reproduced in a sandbox: https://codesandbox.io/s/1zpvll4j24

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

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

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

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

TestUtils.renderIntoDocument(
  <div>
    <FCCounter />
  </div>
);

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

Test Utils Question

Source

DeividasBakanas

All 4 comments

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

TestUtils.renderIntoDocument(<FCCounter/>)

to return?

Also, broadly, can you explain what you're trying to do? You could use forwardRef/useImperativeHandle (https://reactjs.org/docs/hooks-reference.html#useimperativehandle) to get access to internal 'methods', but I'm curious what you're trying to test at all.

threepointone on 11 Apr 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.

DeividasBakanas on 12 Apr 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).

trueadm on 13 Apr 2019

👍1

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 https://github.com/kentcdodds/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.

threepointone on 15 Apr 2019

👍1

Was this page helpful?

0 / 5 - 0 ratings