Ad

HOC Which Passes All Props

I am thinking about writing some React's util (probably HOC) which allows me to test such kind of code:

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

withTestTheme is a wrapper which delivers theme's properties but it make me issue during testing because it causes issues to access to the root component which I want to test. Any ideas on some useful util to easier test above code?

Below withTestTheme which delivers theme - light and dark:

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

Answer

The code which solved my issue:

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