How to test when a react component render fails - reactjs

Question

For example if TestFailComponent tries to access item.id, but item is null:
describe("Should Fail Tests", () => {
describe("render tests", () => {
it("should fail to render since null has no id", () => {
let shouldFail = mount(
<MemoryRouter>
<TestFailComponent
item={null} />
</MemoryRouter>
);
chai.expect(shouldFail.render).to.throw(new TypeError('null has no properties'))
});
});
});
I've also tried:
chai.expect(shouldFail.exists()).to.be.false()
chai.expect(shouldFail.render).to.be.null()
related:
Test whether React component has rendered

Answer 1

You can create error boundary component to test it.
Complete file, which works is:
import React from 'react';
import { mount } from 'enzyme';
// assume this component we want to test
const TestFailComponent = ({ items }) => {
if (items == null) {
throw new TypeError('null has no properties');
}
return 'hello world';
};
// We create a component-helper
class ErrorCatching extends React.Component {
state = { hasError: false };
// we need to change state, so that render cycle could be completed
static getDerivedStateFromError() {
return { hasError: true };
}
// catch error and test it
componentDidCatch(error, errInfo) {
// we even can check componentStack field into errInfo arg
this.props.processError(error, errInfo);
}
render() {
// after the first error we render nothing
if (this.state.hasError) {
return null;
}
return this.props.children;
}
}
describe('Should Fail Tests', () => {
describe('render tests', () => {
it('should fail to render since null has no id', () => {
// our expected error
const expectedError = new TypeError('null has no properties');
mount(
<ErrorCatching processError={(error) => expect(error).toEqual(expectedError)}>
<TestFailComponent item={null} />
</ErrorCatching>
);
});
});
});
You also can check the result of the render which will be null.
More about error handling:
https://reactjs.org/docs/react-component.html#error-boundaries and https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html#targetText=Error%20boundaries%20are%20React%20components,the%20whole%20tree%20below%20them.