'Imports not importing using Jest and Typescript

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"
  ]
}

Solution 1:^[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

Solution 2:^[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

Solution 3:^[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Sators
Solution 2
Solution 3	Mario Perez

'Imports not importing using Jest and Typescript

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]