-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Add react-testing-library #20428
Add react-testing-library #20428
Conversation
<div> | ||
<div | ||
data-position="first" | ||
/>, | ||
/> | ||
<div | ||
data-position="second" | ||
> | ||
Content | ||
</div>, | ||
] | ||
</div> | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All the snapshots will have this wrapping div
added by react-testing-library.
exports[`Slot bubblesVirtually true should subsume another slot by the same name 1`] = ` | ||
Array [ | ||
<div> | ||
<div | ||
data-position="first" | ||
> | ||
<div /> | ||
</div>, | ||
</div> | ||
<div | ||
data-position="second" | ||
> | ||
<div /> | ||
</div>, | ||
] | ||
<div> | ||
Content | ||
</div> | ||
</div> | ||
</div> | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Now Portal works! :)
Size Change: 0 B Total Size: 889 kB ℹ️ View Unchanged
|
This is awesome!! Making Portals work seamlessly with testing is a big win. Not only that, but it looks like we're making tests easier to write as well with |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's give it a try. It needs to be rebased :)
One more thing, if this turns out to be useful, we should add RTL as a dependency for |
Description
This is a simpler alternative to #18855, and, to some extent, addresses #17249.
Comparing to #18855, we lose some features like simulating real user interactions.
@testing-library/react
provides afireEvent
util, whose implementation is pretty much like this:So, calling
fireEvent.click
will only dispatch theclick
event, not the whole event stack dispatched by browsers when users perform a click action, such asmouseDown
,mouseUp
etc.On the other hand, this PR is much smaller, and we don't have to maintain a new package as in #18855. If we do need those test utilities, the PR is there and we can merge it in the future. But just adding
@testing-library/react
here is already a big improvement over the current unit testing approaches we have in this project. Namely,react-dom/test-utils
,react-test-renderer
andenzyme
, as demonstrated in #17249 (comment).As an implementation example, this PR improves the SlotFill tests that weren't covering the
bubblesVirtually
case (react-test-renderer
doesn't support portals). This issue was mentioned on #19242 (comment).How has this been tested?
npm run test-unit
Screenshots
Types of changes
New feature
Checklist: