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

fix(jest/setup): fix circular dependencies in mockModal #32964

Closed

Conversation

AntoineDoubovetzky
Copy link

Summary

Fixes #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

[General] [Fixed] - Fix error "mockModal is not a function"

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.

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Jan 25, 2022
@analysis-bot
Copy link

analysis-bot commented Jan 25, 2022

Platform Engine Arch Size (bytes) Diff
ios - universal n/a --

Base commit: 3d1d4ee
Branch: main

@analysis-bot
Copy link

analysis-bot commented Jan 25, 2022

Platform Engine Arch Size (bytes) Diff
android hermes arm64-v8a 8,297,390 -333
android hermes armeabi-v7a 7,634,290 -337
android hermes x86 8,770,739 -326
android hermes x86_64 8,707,934 -336
android jsc arm64-v8a 9,783,285 -320
android jsc armeabi-v7a 8,768,379 -317
android jsc x86 9,749,232 -312
android jsc x86_64 10,345,315 -312

Base commit: 3d1d4ee
Branch: main

@kelset kelset requested review from cortinico and lunaleaps January 25, 2022 10:48
@facebook-github-bot
Copy link
Contributor

@lunaleaps has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@AntoineDoubovetzky
Copy link
Author

@lunaleaps @yungsters Thanks for your reviews. I took your comments into account and updated the PR.

@cortinico cortinico removed their request for review January 26, 2022 17:02
@facebook-github-bot
Copy link
Contributor

@lunaleaps has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@react-native-bot
Copy link
Collaborator

This pull request was successfully merged by @AntoineDoubovetzky in 507b05f.

When will my fix make it into a release? | Upcoming Releases

@react-native-bot react-native-bot added the Merged This PR has been merged. label Jan 27, 2022
kelset pushed a commit that referenced this pull request Jan 31, 2022
Summary:
Fixes #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: #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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

mockModal is not a function
6 participants