Using Typescript baseUrl and Jest moduleDirectories break React Import

[omarkhatibco]

Bug report

After upgrading to v9.4 I set a project with Typescript, Jest & React-testing-library.

my tsconfig.json

{
	"compilerOptions": {
		"baseUrl": ".",
		"target": "ESNext",
		"lib": ["dom", "dom.iterable", "esnext"],
		"allowJs": true,
		"skipLibCheck": true,
		"strict": true,
		"forceConsistentCasingInFileNames": true,
		"noEmit": true,
		"esModuleInterop": true,
		"allowSyntheticDefaultImports": true,
		"module": "esnext",
		"moduleResolution": "Node",
		"resolveJsonModule": true,
		"isolatedModules": true,
		"jsx": "preserve",
		"alwaysStrict": true,
		"noImplicitAny": false,
		"noFallthroughCasesInSwitch": true,
		"noUnusedLocals": true,
		"noUnusedParameters": false
	},
	"exclude": ["node_modules"],
	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

my jest.config.js

module.exports = {
  collectCoverageFrom: [
    "**/*.{js,jsx,ts,tsx}",
    "!**/*.d.ts",
    "!**/node_modules/**",
  ],
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  testPathIgnorePatterns: ["/node_modules/", "/.next/"],
  transform: {
    "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
  },
  moduleDirectories: [".", "node_modules"],
  transformIgnorePatterns: ["/node_modules/"],
};

my index.test.tsx

import React from "react";
import { render } from "@testing-library/react";
import Page from "pages/index";
// import { Providers } from 'components';

const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return <div>{children}</div>;
};

describe("Home page", () => {
  it("render", () => {
    const { getByText } = render(<Page />, { wrapper: Wrapper });

    const paragraph = getByText(
      /Find in-depth information about Next.js features and API./
    );
    expect(paragraph).toBeInTheDocument();
  });
  // it('matches snapshott', () => {
  // 	const { container } = render(<Index />, { wrapper: Providers });

  // 	expect(container).toMatchSnapshot();
  // });
});

Describe the bug

after using the wrapper feature from React Testing Library I got an error message said TypeError: Cannot read property 'createElement' of undefined

I tried to dig in code and discovered that method is React.createElement.

If I remove the 'baseUrl' and moduleDirectories and importing the page as normal, everything start to works again.

To Reproduce

I prepared a repository for this problem.

https://github.com/omarkhatibco/jest-with-typescript

Expected behavior

React Must be defined.

System information

• OS: [e.g. macOS]

• Version of Next.js: [e.g. 9.4.0]

• Version of Node.js: [e.g. 12.11.1]

Additional context

Add any other context about the problem here.