TypeError: Cannot read property 'createElement' of undefined using TypeScript

[drwpow]

• react-testing-library version: 7.0.1
• react version: 16.8.6
• node version: 12.2.0
• npm (or yarn) version: npm 6.9.0
• jest version: 24.8.0
• ts-jest version: 24.0.2

Relevant code or config:

Here’s the Jest config and test file that’s failing:

module.exports = {
  preset: 'ts-jest',
  setupFilesAfterEnv: ['react-testing-library/cleanup-after-each'],
};

import React from "react";
import { render } from "react-testing-library";
import "jest-dom/extend-expect";
import App from "./App";

test("NotFound page", async () => {
  const { getByTestId } = render(<App />);
  expect(getByTestId("title")).toHaveTextContent("Hello CodeSandbox");
});

The rest of the example can be found here: https://github.com/dangodev/rtl-create-element

What you did:

Setting up react-testing-library in a new project, with the latest versions of Jest, TypeScript, and React, encounters a createElement not found error. Running npm test triggers this.

What happened:

The test suite errs:

TypeError: Cannot read property 'createElement' of undefined

   5 |
   6 | test("NotFound page", async () => {
>  7 |   const { getByTestId } = render(<App />);
     |                                  ^
   8 |   expect(getByTestId("title")).toHaveTextContent("Hello CodeSandbox");
   9 | });
  10 |

Note: this will err without the object destructuring—it fails before it gets to that step.

Reproduction:

Full reproduction repo here: https://github.com/dangodev/rtl-create-element

Problem description:

document.createElement seems to be undefined inside react-testing-library. Or I have Jest misconfigured?

Suggested solution:

My first thought was that somehow I just wasn’t using jsdom. But this is the default env now, and console.log(document.createElement) works fine in the test file. However, either that’s undefined in react-testing-library. Or the React.default.createElement is somehow defined—not sure.

Perhaps there’s something missing in my Jest config, but if that’s the case maybe we can add a section to the setup docs?

[bcarroll22]

hi @DangoDev, the issue is that your tsconfig.json file should contain the following:

{
  "compilerOptions": {
    "jsx": "react",
    "lib": ["dom", "esnext"],
    "module": "esnext",
    "esModuleInterop": true
  },
  "exclude": ["node_modules"]
}

After making this change, your repro test passes. In the future, could you do us a favor and ask support questions like this on our Spectrum chat? We'd really appreciate it. Thanks, and good luck! 😄

[drwpow]

Thanks so much! 👏 And yes, sorry—will do that in the future.

By chance is this TypeScript setup anywhere in the documentation, and I missed it? If not, is there a good place to add this?

[bcarroll22]

It wouldn't be in our docs, that fix isn't related to this library. It's just a general requirement for using React with TypeScript. Without that flag, you have to import React this way:

import * as React from 'react';

No troubles though, happy to help!

[andrescabana86]

Hello here, I have asked in Discord with no luck. I tried with the solution above nothing seems to be working

same problem

this is my repo -> https://github.com/andrescabana86/epic-react-boilerplate

[mareksuscak]

Possibly related for anyone running into this issue:
testing-library/react-hooks-testing-library#294

The only solution that worked for me is:
testing-library/react-hooks-testing-library#294 (comment)

[andirsun]

Dont forget to import React on .tsx files

Before

import {FunctionComponent} from 'react'

After

import React, {FunctionComponent} from 'react'