Testing React components can get pretty complicated, especially when dealing with portals. While they seem intimidating, what they are in essence is a way to render a component in a different place in the DOM. Apart from that, when writing tests, one should avoid testing framework internals. This obviously applies to React internals as well.
Putting these two points together, all we really care about when testing React portals is if the portalized output is correct. Based on that, mocking portals shouldn't be all that hard. We just need to mock ReactDOM.createPortal() to render the input element in place. Here's what that looks like in Jest:
describe('MyComponent', () => {
beforeAll(() => {
ReactDOM.createPortal = jest.fn((element, node) => {
return element;
});
});
afterEach(() => {
ReactDOM.createPortal.mockClear();
});
it('should render correctly', () => {
const component = renderer.create(<MyComponent>Hello World!</MyComponent>);
expect(component.toJSON()).toMatchSnapshot();
});
});This kind of mock will work in most cases and it will help ensure that the portalized output is correct. It comes with some caveats, though. First and foremost, the tested DOM is different from the actual DOM of the application. This can make tests less robust, reducing confidence in their result. Secondly, issues that might arise from the use of portals, such as the portal node missing, must be tested separately.
Recommended snippets
Testing Redux-connected components with React Testing Library is a very common scenario. Learn how to use this simple utility function to speed up your testing.
An approach to testing stateful React components
React, Testing
Testing stateful React components is by no means a difficult task, but did you know there is an elegant solution that doesn't involve testing state directly?
Testing React components that update asynchronously with React Testing Library is a common scenario. Learn how to deal with common issues and speed up your testing.