-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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
having ref in react component causes renderIntoDocument DOM to become empty #95
Comments
Could you please create a reproduction of this in codesandbox? That will help a lot I think. Fork this one: http://kcd.im/rtl-example |
I am not able to reproduce it in codesandbox, however, when running the code downloaded from codesandbox it reproduces. So it may be an issue with my environment. I wonder how codesandbox runs the test (is it in the browser?). In my local env it's run using jest with env=jsdom so maybe that's the issue? |
If you share the sandbox you used I'll verify that. Maybe there really is a problem. |
Thanks for your patience. I finally figured it out. The problem was that scrollIntoView is not in jsdom (jsdom/jsdom#1695). I was expecting it to be there as a no-op. The reproducer is here - https://codesandbox.io/s/8853vq24xl Test passes on codesandbox. Download to local and run 'npm i' followed by 'npm test' will show failure. So it seems I should explore setting up a browser test env instead of jsdom, vs mocking the functions not in jsdom. Do you recommend running rtl with some other test runners (like cypress, karma)? jest+rtl works very well for me so far but I would need such tests working. |
Yes, we should probably have an example of how to test for this, even though it's not specific to react-testing-library. Most people are using Jest + jsdom so they'll probably run into this issue. beforeAll(() => {
if (!HTMLElement.prototype.scrollIntoView) {
HTMLElement.prototype.scrollIntoView = () => {}
}
}) |
react-testing-library
version: 3.1.0react
version: 16.3.2node
version: 8.9.1npm
(oryarn
) version: 5.5.1Relevant code or config:
What you did:
The test is successful if I comment out the following div with ref, in my react component being tested:
What happened:
When the div with ref is there, the test fails and the console shows
Reproduction:
Problem description:
I find that if I have the ref in my react component, after the button click, the DOM (look at PrettyDOM(Rendered.container)) becomes just an empty div , thus failing the subsequent getByText.
Is there known issue with having ref for such tests?
Suggested solution:
The text was updated successfully, but these errors were encountered: