Emotion: [jest.mock + Typescript] You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems.

[bmvantunes]

Current behaviour:

Inside a unit test, after using jest.mock('./MyComponent') we get the error message added at #1677

console.warn node_modules/@emotion/react/dist/react.cjs.dev.js:490
    You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used.

To reproduce:
Option 1 - Cloning:

git clone https://github.com/bmvantunes/emotion-v11-bug-jest.git
cd emotion-v11-bug-jest
npm test

Option 2 - Step by step after "npx create-react-app my-app --typescript":

1. Install @emotion/react and @emotion/styled@next

npm install --save @emotion/react @emotion/styled@next

1. Create a component "ComponentChild.tsx"

import styled from '@emotion/styled';

export const ComponentChild = styled.div`
  background: red;
  height: 300px;
`;

1. Create a component "ComponentParent.tsx"

import { ComponentChild } from "./ComponentChild";
import styled from "@emotion/styled";

export const ComponentParent = styled(ComponentChild)`
  background: blue;
`;

1. Change your "App.tsx" to be:

import React from 'react';
import { ComponentParent } from './ComponentParent';
import { ComponentChild } from './ComponentChild';

const App: React.FC = () => {
  return (
    <>
      <ComponentParent />
      <ComponentChild />
      <p>Test</p>
    </>
  );
}

export default App;

1. Then in your "App.test.tsx":

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

jest.mock('./ComponentParent');

test('renders learn react link', () => {
  const { getByText } = render(<App />);
  const test = getByText(/Test/i);
  expect(test).toBeInTheDocument();
});

1. Run test command

npm test

Expected behaviour:

No warning should be seen in the console

Versions
React - latest
typescript - 3.7.4
react: 16.12.0
@emotion/react - 11.0.0-next.11
@emotion/styled - 11.0.0-next.11

[Andarist]

Thanks for the report - I'm going to take a look at this later.

[bmvantunes]

Thanks @Andarist

[Andarist]

Hm, this is an interesting case. Still digging into this - I need to get more familiar with what jest is actually doing under the hood to isolate tests etc.

[bmvantunes]

@Andarist

I was able to find a way to not show the error in jest.
Basically when jest is running it has "process.env.JEST_WORKER_ID" set.

Going to the if in #1677 and adding "&& process.env.JEST_WORKER_ID" the error is no longer visible in jest.

This still keeps the error in all the other expected "platforms".

PS - I know this is probably not the solution you were looking for, but after a few hours I can't understand why jest loads 2 instances of @emotion/styled.

Do you have any idea why that is happening?

[Andarist]

Do you have any idea why that is happening?

Nope, I've tried to reach out to a jest maintainer, but haven't got an answer so far. Given the fact that this check is primarily meant for browsers, maybe we should just log it only in them. That being said - it could still potentially be helpful for test-runners, but only if we can log it reliably and currently it seems that we can't.

[Andarist]

I've reported it to the Jest team and prepared a PR to mute this warning in Jest for the time being: https://github.com/emotion-js/emotion/pull/1806 . Should get released in a couple of days.

[bmvantunes]

Thank you very very much @Andarist :)