2

I have a component that needs to be exported as follows due to some usages by other components.

I can't change this (can't remove the curly brackets):

export default { MyComponent }; // test fails due to braces

How could I test this. Cos currently when I test this simply via a snapshot test, I get the following error:

Error: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was object.

Now if I remove the curly braces as follows, the test passes. But can't do that because it needs to remain with the curly braces. Is there a way around this to test this component?

export default MyComponent; // test passes but in reality I need to stick with the curly braces.

Note: I am trying to stick with using shallow instead of mount.

MyComponent

const MyComponent = ({ ref }) => {
  const config = {
    sample: {
      ref,
    },
  };

  return (
    <DataComponent
      config={config}
    />
  );
};

export default { MyComponent };

Test failing with above error when I use the curly braces during export.

it('should work', () => {
  expect(shallow(
    <MyComponent
      ref='testref'
    />
  )).toMatchSnapshot();
});
WOUNDEDStevenJones
  • 5,150
  • 6
  • 41
  • 53
karvai
  • 2,417
  • 16
  • 31
  • 1
    *Why* does it need "to remain with the curly braces"? Note that `export default { MyComponent }` (an object as the default export) is not the same as `export const MyComponent = ...` (a function as a named, non-default export) - `import { MyComponent } from "wherever"` would only work with the latter (see e.g. https://stackoverflow.com/q/43814830/3001761). – jonrsharpe Mar 15 '21 at 16:32
  • *due to some usages by other components* - you need to use it the same way as it's used elsewhere. Currently the only correct way to use it is `import myComponentObj from "wherever"; const { MyComponent } = myComponentObj`, and it looks like somebody wasn't comfortable enough with ESM when writing this. – Estus Flask Mar 15 '21 at 17:53

0 Answers0