传递所有 props 的 HOC

Question

我正在考虑编写一些 React 的实用程序（可能是 HOC），它允许我测试此类代码：

    const wrapper = enzyme
      .mount(
        withTestTheme(
          <JsonInput
            onChange={onChange}
            onValueChange={mockOnValueChange}
            value={exampleJsonStringValidated}
          />),
      );

withTestTheme 是一个包装器，它提供主题的属性，但它让我在测试过程中出现问题，因为它会导致访问我想要测试的根组件时出现问题。对一些有用的实用程序有什么想法可以更轻松地测试上面的代码吗？

下方 withTestTheme 提供主题 - 光明与黑暗：

export const withTestTheme = (Component: React.ReactChild) => (
  <ThemeProvider theme={TestTheme}>
  {Component}
</ThemeProvider>
);

Answer 1

解决我问题的代码：

export const withTestThemeWrapper = (props: { children: React.ReactElement }) => (
  <ThemeProvider theme={TestTheme}>
    {props.children}
  </ThemeProvider>
);

传递所有 props 的 HOC

HOC which passes all props

reactjs

testing

jestjs

enzyme

higher-order-components