Summary:
Fixes https://github.com/facebook/react-native/issues/32939
It appears there is circular dependencies on the Modal component that causes the modalMock function to be an empty object. Removing the import fixes the issue.
I don't know yet why this is not happening when executing the test suite inside `Modal-test.js` but I will investigate this later.
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->
[General] [Fixed] - Fix error "mockModal is not a function"
Pull Request resolved: https://github.com/facebook/react-native/pull/32964
Test Plan:
On a newly initiated project using react-native 0.67.1 I created a ModalComponent:
```
import React from 'react';
import {Modal, Text} from 'react-native';
export const ModalComponent = () => {
return (
<Modal visible>
<Text>Test</Text>
</Modal>
);
};
```
and a ModalComponent.test.tsx:
```
import 'react-native';
import React from 'react';
import {ModalComponent} from '../ModalComponent';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
renderer.create(<ModalComponent />);
});
```
Running the test throws the error "TypeError: mockModal is not a function".
After modifying the mockModal inside node_modules/react-native/jest/mockModal.js it works correctly.
Reviewed By: christophpurrer
Differential Revision: D33771136
Pulled By: lunaleaps
fbshipit-source-id: c09ada8d2f864f5568b3379616a6cace9fb9921e
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 https://github.com/callstack/react-native-testing-library/issues/508 and https://github.com/callstack/react-native-testing-library/issues/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: https://github.com/facebook/react-native/pull/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:
Reviewed By: yungsters
Differential Revision: D31445964
Pulled By: lunaleaps
fbshipit-source-id: 08501921455728cde6befd0103016c95074cc1df
AntoineDoubovetzky
Andres Suarez
