jest failed when testing a component that use

[HeadFox]

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(R) Core(TM) 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 :)

[kripod]

Unfortunately, I'm not quite sure about what's happening here. However, I suspect that the issue is related to your bundler or testing environment configuration rather than the library itself.

[arturwojtas]

in create-react-app if you try to import this library in jest, then jest returns this object: { default: 'bundle.min.cjs' }

it would seem that if jest doesn't recognize file extension, then it defauls to just returning bundle file name (it may be convenient if you are for example importing images or something that is not shown during unit tests)

if you were to change generated common js bundle name from ./dist/cjs/bundle.min.cjs to ./dist/cjs/bundle.min.js or even ./dist/cjs/bundle.min.cjs.js it should fix the problem - if you make this change in your own node_modules/react-polymorphic-box then this library gets imported correctly in jest tests

out of all imported libraries in my project this one seems to be the only one which has .cjs bundle file extension

[kripod]

@arturwojtas Thank you for the detailed explanation! I'll look into this soon.

[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!