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

Closed
DeividasBakanas opened this issue Apr 10, 2019 · 4 comments

Comments

@DeividasBakanas
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.

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

@threepointone
Copy link
Contributor

@threepointone threepointone commented Apr 11, 2019

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.

@DeividasBakanas
Copy link
Author

@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.

@trueadm
Copy link
Member

@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).

@threepointone
Copy link
Contributor

@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 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.

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

Successfully merging a pull request may close this issue.

None yet
3 participants