cx from @emotion/css causes "Uncaught [TypeError: (0 , _css.cx) is not a function]" in jest unit tests

[hbinkle]

Current behavior: building/running code using cx on webpack devserver is fine. But when running simple unit tests using jest I get the error: Uncaught [TypeError: (0 , _css.cx) is not a function]

To reproduce: a unit test like

const component = mount(
      <ThemeProvider theme={createTheme({})}>
        <MyComponent />
      </ThemeProvider>,
    );

where MyComponent looks like:

function MyComponent(props: {isDrawerOpen: boolean}){
const { classes } = useStyles();
return (
        <main
            className={cx(classes.content, {
              [classes.contentShift]: isDrawerOpen,
            })}
          >
            any content
        </main>
);
}

... causes:

  Error: Uncaught [TypeError: (0 , _css.cx) is not a function]
          at reportException (/project/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
          at innerInvokeEventListeners (/project/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:341:9)
          at invokeEventListeners (/project/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
          at HTMLUnknownElementImpl._dispatch (/project/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
          at HTMLUnknownElementImpl.dispatchEvent (/project/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
          at HTMLUnknownElement.dispatchEvent (/project/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
          at Object.invokeGuardedCallbackDev (/project/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
          at invokeGuardedCallback (/project/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
          at beginWork$1 (/project/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
          at performUnitOfWork (/project/node_modules/react-dom/cjs/react-dom.development.js:22779:12) TypeError: (0 , _css.cx) is not a function
          at MyComponent 

Expected behavior: like when webpack builds the project, unit tests should also not throw compile errors.

Environment information: npm: '8.5.0', node: '16.14.2',

• react version: 17.0.2
• @emotion/react version: 11.8.1
• @emotion/css version: 11.7.1

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[srmagura]

My gut says this has to do with your Jest config and how you are transforming your source code so it can run in Jest. So yes, as Andarist said, we need a minimal repro project.

[hbinkle]

@Andarist, @srmagura , thanks your reply. I also assume a setting in the tsconfig. But I can't find out which. test-demo.zip I reduced my project down to that one test only. Simply unzip --> npm i --> npm run test

Maybe you get an idea why this works when using clsx but not for cx in ReconFrame:36

[hbinkle]

I just found the issue. The moduleNameMapper in my jest.config.js causes it:

 moduleNameMapper: {
    '^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
  },

As soon as I remove that one the test run fine.

[hbinkle]

created an issue at: https://github.com/eddyerburgh/jest-transform-stub/issues/29