Imports not importing using Jest and Typescript

Question

I am using Jest, Enzyme and Typescript, but for some reason certain imports are not working... they are undefined. For example, I have import ReactMarkdown from 'react-markdown'; in a file and when I run the tests, I get Cannot read property 'createElement' of undefined for ReactMarkdown. Below are the configuration files

jest.config.js

/* tslint:disable */

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  moduleFileExtensions: [
    "ts",
    "tsx",
    "js"
  ],
  transform: {
    "^.+\\.tsx?$": "ts-jest",
    "^.+\\.svg$": "jest-svg-transformer"
  },
  testMatch: [
    "**/*.(test|spec).(ts|tsx)"
  ],
  globals: {
    "ts-jest": {
      babelConfig: true,
      tsConfig: "jest.tsconfig.json"
    }
  },
  coveragePathIgnorePatterns: [
    "/node_modules/",
    "enzyme.js"
  ],
  setupTestFrameworkScriptFile: "<rootDir>/enzyme.js",
  coverageReporters: [
    "json",
    "lcov",
    "text",
    "text-summary"
  ],
  moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/mocks.js",
    "\\.(css|less|scss)$": "<rootDir>/__mocks__/mocks.js"
  }
};

jest.ts.config.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "module": "commonjs",
    "target": "esnext",
    "jsx": "react",
    "sourceMap": false,
    "experimentalDecorators": true,
    "noImplicitUseStrict": true,
    "removeComments": true,
    "moduleResolution": "node",
    "lib": [
      "es2017",
      "dom"
    ],
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "node_modules",
    "out",
    ".next"
  ]
}

Overalls

Is it because you need allowSyntheticDefaultImports:true in your tsconfig.json? – Interpleader

No, I have that in my tsconfig – Overalls

@Overalls did you find a solution for that problem? – Scab

Show your tsconfig. In my experience most if not all import issues stem from a bad tsconfig. tsconfig allows you to define things like path aliases, and baseUrl that make for nicer paths, but dont really play well with other JS technolgies. – Wailful

which version of react-markdown do you use? – Pleasance

Answer 1

createElement is a method of the global document variable. document is available to us in JavaScript when run within a browser, but not within node, thus the reason for document being undefined when something tries to run document.createElement() within a node unit test environment.

JSDOM is a library that will create a fake document and window global variable that can be used for unit testing scenarios like the one you are trying to achieve. Therefore, implementing JSDOM into your testing environment, especially the ReactMarkdown component which is throwing the error, could get you past this.

A lengthy description can be read at Testing With Node, Jest, and JSDOM

Repine

Answer 2

Are you sure that testEnvironment=node is correct? because there is no document in Node and would explain the error message.

BTW node is the default value, so you could omit that option anyway 🥳

maybe try if this solves the problem: testEnvironment=jsdom

and you might consider to use this library which will let you work immediately without do the whole setup on your own: https://www.npmjs.com/package/jest-environment-enzyme

Cockoftherock

Answer 3

Add a new node to the root object in jest.ts.config.json called "include" with the patters of your files, you will need to adapt this example to your code's naming conventions

"include": [
  "src/**/*test.tsx",
  "src/**/*test.ts"
]

This will include your jest files under this config and will prevent the "Cannot read" despicable error to show up.

Mercaptide