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

ReactTestUtils.mockComponent() supports function and forwardRef components #13192

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 51 additions & 12 deletions packages/react-dom/src/__tests__/ReactTestUtils-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,21 +43,60 @@ describe('ReactTestUtils', () => {
expect(Object.keys(ReactTestUtils.SimulateNative).sort()).toMatchSnapshot();
});

it('gives Jest mocks a passthrough implementation with mockComponent()', () => {
class MockedComponent extends React.Component {
render() {
throw new Error('Should not get here.');
describe('mockComponent', () => {
it('should support jest-mocked class components', () => {
class MockedClassComponent extends React.Component {
render() {
throw new Error('Should not get here.');
}
}
}
// This is close enough to what a Jest mock would give us.
MockedComponent.prototype.render = jest.fn();

// Patch it up so it returns its children.
ReactTestUtils.mockComponent(MockedComponent);
// This is close enough to what a Jest mock would give us.
MockedClassComponent.prototype.render = jest.fn();

const container = document.createElement('div');
ReactDOM.render(<MockedComponent>Hello</MockedComponent>, container);
expect(container.textContent).toBe('Hello');
ReactTestUtils.mockComponent(MockedClassComponent);

const container = document.createElement('div');
ReactDOM.render(
<MockedClassComponent>Hello</MockedClassComponent>,
container,
);
expect(container.textContent).toBe('Hello');
});

it('should support jest-mocked functional components', () => {
const MockedFunctionComponent = jest.fn(props => {
throw new Error('Should not get here.');
});

ReactTestUtils.mockComponent(MockedFunctionComponent);

const container = document.createElement('div');
ReactDOM.render(
<MockedFunctionComponent>Hello</MockedFunctionComponent>,
container,
);
expect(container.textContent).toBe('Hello');
});

it('should support jest-mocked forwardRef object', () => {
const RefForwardingFunction = (props, ref) => {
throw new Error('Should not get here.');
};
const RefForwardingComponent = React.forwardRef(RefForwardingFunction);

// This is close enough to what a Jest mock would give us.
RefForwardingComponent.render = jest.fn();

ReactTestUtils.mockComponent(RefForwardingComponent);

const container = document.createElement('div');
ReactDOM.render(
<RefForwardingComponent>Hello</RefForwardingComponent>,
container,
);
expect(container.textContent).toBe('Hello');
});
});

it('can scryRenderedComponentsWithType', () => {
Expand Down
20 changes: 17 additions & 3 deletions packages/react-dom/src/test-utils/ReactTestUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -311,9 +311,23 @@ const ReactTestUtils = {
mockComponent: function(module, mockTagName) {
mockTagName = mockTagName || module.mockTagName || 'div';

module.prototype.render.mockImplementation(function() {
return React.createElement(mockTagName, null, this.props.children);
});
if (module.prototype != null) {
// Class or functional component
if (typeof module.prototype.render === 'function') {
module.prototype.render.mockImplementation(function() {
return React.createElement(mockTagName, null, this.props.children);
});
} else {
module.mockImplementation(props =>
React.createElement(mockTagName, null, props.children),
);
}
} else if (typeof module.render === 'function') {
// Forward ref object
module.render.mockImplementation(props =>
React.createElement(mockTagName, null, props.children),
);
}

return this;
},
Expand Down