使用React测试库 /开玩笑测试错误边界：

Question

我正在尝试为错误边界hoc编写测试。但是，当我模拟包装组件中的抛出错误时，我的测试会失败，因为我丢了相同的错误，就像它似乎没有意识到此错误是用于测试的。我不确定我在这里做错了什么。

这是errorboundary hoc：

interface StateProps {
  error: unknown;
  info: unknown;
}

interface ErrorBoundaryProps {
  createNotification(...args: any): void;
}

const connector = connect(null, {
  createNotification: createNotificationAction,
});

export const withErrorBoundary = <P extends object>(TargetComponent: React.ComponentType<P>) => {
  class ErrorBoundary extends React.Component<ErrorBoundaryProps, StateProps> {
    constructor(props: ErrorBoundaryProps) {
      super(props);
      this.state = {
        error: null,
        info: null,
      };
    }

    public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
      this.props.createNotification({
        alertType: 'error',
        message: `${TargetComponent.name} is not being rendered. Error: ${error.message}`,
      });
      this.setState({ error, info: errorInfo });
    }

    public render() {
   
      const { ...props } = this.props;
      if (this.state.error instanceof Error) {
        return null;
      }
      return <TargetComponent {...(props as P)} />;
    }
  }

  return connector(ErrorBoundary) as any;
};

这是测试：

describe('ErrorBoundary HOC', () => {
  let store;
  let createNotification;
  let props;

  beforeEach(() => {
    store = configureStore(defaultState);
    createNotification = jest.fn();

    props = {
      createNotification,
    };

  });

  test('Renders nothing if error', async () => {
    const targetComponent = () => {
      throw new Error('Errored!');
    };
    const WrappedComponent = withErrorBoundary(targetComponent);
    const RenderedComponent = render(
      <BrowserRouter>
        <Provider store={store}>
          <WrappedComponent {...props} />
        </Provider>
      </BrowserRouter>
    );

    await waitFor(() => expect(() => WrappedComponent.toThrow()));
    expect(RenderedComponent.container.hasChildNodes()).toBeFalsy();
    await waitFor(() => expect(createNotification).toHaveBeenCalled());

 
  });

});

到目前为止，我已经发现错误是在测试中呈现之前投掷的。但不确定如何解决这个问题。

感谢您提前的帮助。

Answer 1

在函数组件中，除了useefffect（）中的内容外，在返回之前执行返回之前的所有内容。

在这种情况下，targetComponent没有返回或JSX渲染，但仍然适用。

您可以在这样的渲染之后丢弃错误，

const targetComponent = () => {
  useEffect(() => {
    throw new Error('Errored!');
  }, [])
}

我不确定是否足以为您提供所需的测试，但这是一个细致点。