jest failed when testing a component that use

Description

I’ve got an error during jest test process when I test a component that import a component who use Box. The problem is that this component is located in our private component library and the issue only happened in this particular case. If I directly test the component directly in the library there is no problem at all.

Here is my architecture :

• MyCard (Component where test failed) --> import Card component from @library/Card --> Card component contains the polymorphic box logic

Here is the error :

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

The react render works, the problem came only when using jest

Workaround

• Move the Box component directly from the react-polymorphic-box into my library (Works)

Reproduction

To reproduce it you have to import a component from a library that use polymorphic.

Possible issue location

Maybe the issue is the bundle generated

Environment

System:

• OS: macOS 10.15.6
• CPU: (8) x64 Intel® Core™ i5-8257U CPU @ 1.40GHz
• Memory: 86.46 MB / 16.00 GB
• Shell: 3.1.2 - /usr/local/bin/fish

Binaries:

• Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node
• Yarn: 1.22.4 - /usr/local/bin/yarn
• npm: 6.14.5 - ~/.nvm/versions/node/v12.18.2/bin/npm

Browsers:

• Chrome: 84.0.4147.89
• Firefox Developer Edition: 79.0
• Safari: 13.1.2

Libs:

react-scripts: 3.4.1 jest: 24.9.0 @testing-library/react: 10.4.4

I can’t create a codesandbox to reproduce this issue but if you have any question, please ask 😃

[arturwojtas]

If you need workaround to make your jest tests to work, then something like this works for me: Put in setupTests.js

const defaultElement = "div";
export const mockBox = React.forwardRef((props, ref) => {
    const Element = props.as || defaultElement;
    return <Element ref={ref} {...props} as={undefined} />;
});

jest.mock("react-polymorphic-box", () => ({ Box: mockBox }));

[kripod]

This should be resolved by v2.0.6. Thanks to all of you for reporting again!