Skip to content

Commit

Permalink
ScrollView: Cleanup Jest Tests
Browse files Browse the repository at this point in the history
Summary:
Cleans up `ScrollView-test.js` to be easier to read and to include a unit test for `ref`.

This prepares the Jest test suite to be extended with an additional test to validate a bug with `ref` invalidation.

Changelog:
[Internal]

Reviewed By: sammy-SC

Differential Revision: D41208894

fbshipit-source-id: 6d79adf131602292f7aa3180b1c230643e9baf16
  • Loading branch information
yungsters authored and facebook-github-bot committed Nov 12, 2022
1 parent 8c2a4d0 commit 99381de
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 26 deletions.
65 changes: 43 additions & 22 deletions Libraries/Components/ScrollView/__tests__/ScrollView-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,12 @@ const ScrollView = require('../ScrollView');
const React = require('react');
const ReactTestRenderer = require('react-test-renderer');

describe('<ScrollView />', () => {
it('should render as expected', () => {
describe('ScrollView', () => {
beforeEach(() => {
jest.resetModules();
});

it('renders its children', () => {
ReactNativeTestTools.expectRendersMatchingSnapshot(
'ScrollView',
() => (
Expand All @@ -34,34 +38,51 @@ describe('<ScrollView />', () => {
},
);
});
it('should mock native methods and instance methods when mocked', () => {
jest.resetModules();

it('mocks native methods and instance methods', () => {
jest.mock('../ScrollView');
const ref = React.createRef();

const ref = React.createRef();
ReactTestRenderer.create(<ScrollView ref={ref} />);

expect(ref.current != null && ref.current.measure).toBeInstanceOf(
jest.fn().constructor,
);
expect(ref.current != null && ref.current.scrollTo).toBeInstanceOf(
jest.fn().constructor,
);
expect(ref.current?.measure).toBeInstanceOf(jest.fn().constructor);
expect(ref.current?.scrollTo).toBeInstanceOf(jest.fn().constructor);
});
it('getInnerViewRef for case where it returns a native view', () => {
jest.resetModules();
jest.unmock('../ScrollView');

const scrollViewRef = React.createRef(null);
describe('ref', () => {
it('receives an instance or null', () => {
jest.dontMock('../ScrollView');

const scrollViewRef = jest.fn();
const testRendererInstance = ReactTestRenderer.create(
<ScrollView ref={scrollViewRef} />,
);

expect(scrollViewRef).toHaveBeenLastCalledWith(
expect.objectContaining({_nativeTag: expect.any(Number)}),
);

testRendererInstance.unmount();

expect(scrollViewRef).toHaveBeenLastCalledWith(null);
});
});

ReactTestRenderer.create(<ScrollView ref={scrollViewRef} />);
describe('getInnerViewRef', () => {
it('returns an instance', () => {
jest.dontMock('../ScrollView');

const innerViewRef = scrollViewRef.current.getInnerViewRef();
const scrollViewRef = React.createRef(null);
ReactTestRenderer.create(<ScrollView ref={scrollViewRef} />);
const innerViewRef = scrollViewRef.current.getInnerViewRef();

// This is checking if the ref acts like a host component. If we had an
// `isHostComponent(ref)` method, that would be preferred.
expect(innerViewRef.measure).toBeInstanceOf(jest.fn().constructor);
expect(innerViewRef.measureLayout).toBeInstanceOf(jest.fn().constructor);
expect(innerViewRef.measureInWindow).toBeInstanceOf(jest.fn().constructor);
// This is checking if the ref acts like a host component. If we had an
// `isHostComponent(ref)` method, that would be preferred.
expect(innerViewRef.measure).toBeInstanceOf(jest.fn().constructor);
expect(innerViewRef.measureLayout).toBeInstanceOf(jest.fn().constructor);
expect(innerViewRef.measureInWindow).toBeInstanceOf(
jest.fn().constructor,
);
});
});
});
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<ScrollView /> should render as expected: should deep render when mocked (please verify output manually) 1`] = `
exports[`ScrollView renders its children: should deep render when mocked (please verify output manually) 1`] = `
<RCTScrollView>
<View>
<View>
Expand All @@ -12,7 +12,7 @@ exports[`<ScrollView /> should render as expected: should deep render when mocke
</RCTScrollView>
`;

exports[`<ScrollView /> should render as expected: should deep render when not mocked (please verify output manually) 1`] = `
exports[`ScrollView renders its children: should deep render when not mocked (please verify output manually) 1`] = `
<RCTScrollView
alwaysBounceVertical={true}
onContentSizeChange={null}
Expand Down Expand Up @@ -65,7 +65,7 @@ exports[`<ScrollView /> should render as expected: should deep render when not m
</RCTScrollView>
`;

exports[`<ScrollView /> should render as expected: should shallow render as <ScrollView /> when mocked 1`] = `
exports[`ScrollView renders its children: should shallow render as <ScrollView /> when mocked 1`] = `
<ScrollView>
<View>
<Text>
Expand All @@ -75,7 +75,7 @@ exports[`<ScrollView /> should render as expected: should shallow render as <Scr
</ScrollView>
`;

exports[`<ScrollView /> should render as expected: should shallow render as <ScrollView /> when not mocked 1`] = `
exports[`ScrollView renders its children: should shallow render as <ScrollView /> when not mocked 1`] = `
<ScrollView>
<View>
<Text>
Expand Down

0 comments on commit 99381de

Please sign in to comment.