mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
AntoineDoubovetzky
ec614c16b3
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
70 lines
1.6 KiB
JavaScript
70 lines
1.6 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @emails oncall+react_native
|
|
* @flow strict-local
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const React = require('react');
|
|
const View = require('../../Components/View/View');
|
|
const Modal = require('../Modal');
|
|
|
|
const render = require('../../../jest/renderer');
|
|
|
|
describe('<Modal />', () => {
|
|
it('should render as <Modal> when mocked', () => {
|
|
const instance = render.create(
|
|
<Modal>
|
|
<View />
|
|
</Modal>,
|
|
);
|
|
expect(instance).toMatchSnapshot();
|
|
});
|
|
|
|
it('should not render its children when mocked with visible=false', () => {
|
|
const instance = render.create(
|
|
<Modal visible={false}>
|
|
<View testID="child" />
|
|
</Modal>,
|
|
);
|
|
expect(instance.root.findAllByProps({testID: 'child'})).toHaveLength(0);
|
|
});
|
|
|
|
it('should shallow render as <Modal> when mocked', () => {
|
|
const output = render.shallow(
|
|
<Modal>
|
|
<View />
|
|
</Modal>,
|
|
);
|
|
expect(output).toMatchSnapshot();
|
|
});
|
|
|
|
it('should shallow render as <Modal> when not mocked', () => {
|
|
jest.dontMock('../Modal');
|
|
|
|
const output = render.shallow(
|
|
<Modal>
|
|
<View />
|
|
</Modal>,
|
|
);
|
|
expect(output).toMatchSnapshot();
|
|
});
|
|
|
|
it('should render as <RCTModalHostView> when not mocked', () => {
|
|
jest.dontMock('../Modal');
|
|
|
|
const instance = render.create(
|
|
<Modal>
|
|
<View />
|
|
</Modal>,
|
|
);
|
|
expect(instance).toMatchSnapshot();
|
|
});
|
|
});
|