时间戳

首页 > 解决方案 > 通过所有道具的HOC

reactjs - 通过所有道具的HOC

问题描述

我正在考虑编写一些 React 的 util（可能是 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>
);

标签： reactjstestingjestjsenzymehigher-order-components

解决方案

解决我的问题的代码：

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

推荐阅读