v11: and import/reference to useTheme fails in tests: TypeError: stylis.middleware is not a function

Current behavior:

I’ve upgraded to the wonderful v11 (thanks for your great work, btw!). Alas, any attempt to import useTheme from within a [jest] test fails for me with TypeError: stylis.middleware is not a function.

To reproduce:

# useTheme.test.ts
import { useTheme } from '@emotion/react';

it('should be defined', () => {
  expect(useTheme).toBeDefined(); // FAILS: TypeError: stylis.middleware is not a function
});

Note that just the import + reference to useTheme fails, we’re not even invoking useTheme() here.

Environment information:

• react version: 17.0.1
• @emotion/react version: 11.0.0

[nisarhassan12]

I had a similiar issue in a Next JS project I got if fixed via removing./node_modules and .next and then running yarn install, yarn build and then yarn dev.

[jereddanielson]

@Joaoviana @nisarhassan12 thanks for the help! sadly the issue is still there after a bit of mucking around. I’ll need to take a deeper look at some point soon and will update this issue if I find a fix.

Not sure if it’s relevant to you but I was able to solve the issue described on this page by checking my Jest config and removing moduleDirectories: ['.', 'src', 'node_modules'] from jest.config.js. I’m not sure why that line was there originally, tests seem to run fine without it and finally solves my problem with emotion v11.

I’d recommend going through your Jest config line by line - remove a line, run tests, see if it helps. That’s literally what I did and it helped narrow down the problem.

Good luck.