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

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]

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 😃