时间戳

首页 > 解决方案 > 为什么我的子组件“主题”在酶“安装”中未定义？

reactjs - 为什么我的子组件“主题”在酶“安装”中未定义？

问题描述

我正在尝试在我们的 jest/enzyme 单元测试中使用 styled-components 设置主题。我创建了一个useTheme钩子，它将从样式组件的 ThemeContext 返回当前主题。

export const useTheme = (): Theme => {
  return React.useContext<Theme>(ThemeContext)
};

然后，我创建了一个自定义挂载函数，将我测试过的组件包装在提供程序中：

const CustomThemeProvider = ({
  children,
}: Omit<ThemeProviderProps<Theme, Theme>, 'theme'>) => (
  <ThemeProvider theme={lightTheme}>{children}</ThemeProvider>
);

const customMount = (
  node: React.ReactElement<any>,
  options?: MountRendererProps
) => {
  return mount(node, {
    wrappingComponent: CustomThemeProvider,
    ...options,
  });
};

我现在只有一个使用useTheme钩子的组件，并且该组件的测试通过并且很好。但是，当我测试其中包含该组件的组件时，测试套件无法运行，并出现一个错误，基本上说theme未定义（从钩子返回的内容）。下面的测试设置示例在其中返回Icon的组件在哪里，除非我在自己的单元测试中。useThemeundefined

    beforeEach(() => {
      wrapper = mount(
        <Button>
          Easy
          <Icon icon="heart" role="presentation" />
        </Button>
      );
    });

我已经在谷歌上搜索了几天，这超出了我的其他工程师的头脑，所以我不确定为什么没有像我期望的那样将主题提供给子组件。我已经尝试在 ThemeProviders 中包装所有内容，取消注释Icon让我运行测试，但理想情况下我可以使用它运行它（很可能需要它用于其他组件）。尝试使用调试器运行，但没有什么明显的跳出给我。

标签： reactjsjestjsenzymestyled-components

解决方案

推荐阅读