Files
react-native/Libraries/Components/Touchable/__tests__/TouchableHighlight-test.js
T
Bruno Castro c4e40b81c0 feat: add displayName to touchables (#29531)
Summary:
Since TouchableHighlight and TouchableOpacity are being exported using `forwardRef`, it's messing up jest's snapshots and some matchers.
This commit 4b935ae95f fixed this for components being mocked on [setup.js](https://github.com/facebook/react-native/blob/master/jest/setup.js). However, these Touchables aren't being mocked.

It resolves https://github.com/facebook/react-native/issues/27721

## Changelog

[General] [Added] - Add displayName to TouchableHighlight and TouchableOpacity

Pull Request resolved: https://github.com/facebook/react-native/pull/29531

Test Plan: Check the new snapshots.

Reviewed By: kacieb

Differential Revision: D27485269

Pulled By: yungsters

fbshipit-source-id: ba2082a4ae9f97ebe93ba92971d58c9195bdf26d
2021-03-31 17:36:02 -07:00

91 lines
2.2 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
*/
'use strict';
import * as React from 'react';
import Text from '../../../Text/Text';
import View from '../../View/View';
import TouchableHighlight from '../TouchableHighlight';
const render = require('../../../../jest/renderer');
describe('TouchableHighlight', () => {
it('renders correctly', () => {
const instance = render.create(
<TouchableHighlight style={{}}>
<Text>Touchable</Text>
</TouchableHighlight>,
);
expect(instance.toJSON()).toMatchSnapshot();
});
it('has displayName', () => {
expect(TouchableHighlight.displayName).toEqual('TouchableHighlight');
});
});
describe('TouchableHighlight with disabled state', () => {
it('should be disabled when disabled is true', () => {
expect(
render.create(
<TouchableHighlight disabled={true}>
<View />
</TouchableHighlight>,
),
).toMatchSnapshot();
});
it('should be disabled when disabled is true and accessibilityState is empty', () => {
expect(
render.create(
<TouchableHighlight disabled={true} accessibilityState={{}}>
<View />
</TouchableHighlight>,
),
).toMatchSnapshot();
});
it('should keep accessibilityState when disabled is true', () => {
expect(
render.create(
<TouchableHighlight
disabled={true}
accessibilityState={{checked: true}}>
<View />
</TouchableHighlight>,
),
).toMatchSnapshot();
});
it('should overwrite accessibilityState with value of disabled prop', () => {
expect(
render.create(
<TouchableHighlight
disabled={true}
accessibilityState={{disabled: false}}>
<View />
</TouchableHighlight>,
),
).toMatchSnapshot();
});
it('should disable button when accessibilityState is disabled', () => {
expect(
render.create(
<TouchableHighlight accessibilityState={{disabled: true}}>
<View />
</TouchableHighlight>,
),
).toMatchSnapshot();
});
});