如何测试反应组件渲染失败的时间

Question

例如，如果 TestFailComponent 尝试访问 item.id，但项目是 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'))
    });

  });
});

我也试过：

chai.expect(shouldFail.exists()).to.be.false()
chai.expect(shouldFail.render).to.be.null()

相关：

Answer 1

您可以创建错误边界组件来测试它。完整的文件，有效的是：

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>
            );
        });
    });
});

您还可以检查渲染结果是否为空。

关于错误处理的更多信息： 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.

如何测试反应组件渲染失败的时间

How to test when a react component render fails

chai

reactjs

enzyme