Skip to content

React Native's Modal mock contains a bug #508

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.

Sign up for GitHub

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

Jump to bottom
Closed
vanGalilea opened this issue Aug 15, 2020 · 1 comment
Closed

React Native's Modal mock contains a bug #508

vanGalilea opened this issue Aug 15, 2020 · 1 comment
Labels
question Further information is requested

Comments

@vanGalilea
Copy link
Contributor

So it seems like React Native's Modal is being mocked wrong.

When rendered in tests the Modal and its children are constantly showing in the tree, also when set to be not visible.
Just figured out how to fix this issue in my examples repo: https://github.com/vanGalilea/react-native-testing

Does somebody know whether the Modal is actually mocked by RN or by RNTL.
If it's mocked by RNTL, where can I update the Modal mock? so I can create a PR.

Cheers!
@vanGalilea vanGalilea added the question Further information is requested label Aug 15, 2020
@thymikee
Copy link
Member

We don't provide any mocks.

@kirbycool kirbycool mentioned this issue Jan 26, 2021
Closed
@AntoineDoubovetzky AntoineDoubovetzky mentioned this issue Oct 6, 2021
Closed
facebook-github-bot pushed a commit to facebook/react-native that referenced this issue Oct 8, 2021
@facebook-github-bot
Update Modal's mock to not render its children when it is not visible (…
ec614c1 
…#32346)

Summary:
The Modal's mock always render its children (whether it is visible or not), whereas in reality the Modal renders `null` when the Modal is not visible.
This causes troubles when trying to test whether the Modal is visible or not. Instead of testing if the children are rendered (using getByText from React Native Testing Library for instance), we are forced to test the value of the visible prop directly (see callstack/react-native-testing-library#508 and callstack/react-native-testing-library#659).
This is not ideal because we are forced to test implementation detail and can't test from the user perspective. I also believe the mock should be closest as possible from reality.

I had 2 options:
  1. Rendering the Modal without its children
  2. Not rendering the Modal at all

The latter has the advantage of being closer to the reality, but I chose the former to still be able to test the Modal through the visible prop, so there is no breaking change (only snapshots update will be required).

## Changelog

[General] [Changed] - Update Modal's mock to not render its children when it is not visible

Pull Request resolved: #32346

Test Plan:
I added a test case when visible is false, then updated the mock so the children are not rendered. The before / after is here:
![image](https://user-images.githubusercontent.com/17070498/136256142-a351d002-8b77-490a-ba65-1e8ad0d6eb55.png)

Reviewed By: yungsters

Differential Revision: D31445964

Pulled By: lunaleaps

fbshipit-source-id: 08501921455728cde6befd0103016c95074cc1df
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@thymikee @vanGalilea