CODEWITHSUNDEEP
javascriptreactjsecmascript-6jestjs
oyilmaztekin
oyilmaztekin

Reputation: 753

Jest : TypeError: require(...) is not a function

The application is written by React with ES6 so import and export statements are used inside the application. So Jest is configured to work compatible with ES6, but compiled node_modules dependencies are causing an error which is

TypeError: require(...) is not a function

when tests started.

I assume this is happening because Jest configured to work with babel-jest to handle import statements, but compiled codes are using require for handling the modules. I tried to exclude node_modules folder, but nothing changed. I think, ES6 modules using compiled modules placed into the node_modules as a dependency because of that it cannot be excluded? Is it possible?

Also, I am having a problem to understand how does jest handle both import and require at the same time? If ES6 codes are compiled first then each module will be handled as require after that compiling process. So what is the problem?

Here are the configurations

jest.config.js

module.exports = {
  clearMocks: true,
  moduleNameMapper: {
    "^.+\\.(js|jsx)$": "babel-jest",
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "<rootDir>/mocks/fileMock.js",
    "\\.(css|scss|sass|less)$":
      "<rootDir>/mocks/styleMock.js"
  },
  modulePathIgnorePatterns: [
    "node_modules/"
  ]
};

babel.config.js

/* eslint-disable */
module.exports = {
  presets: [
    "@babel/preset-react",
    [
      "@babel/preset-env",
      {
        targets: {
          browsers: ["ie >= 9", "safari >= 8"]
        }
      }
    ]
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    [
      "@babel/plugin-proposal-class-properties",
      { loose: true }
    ],
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-object-assign",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-transform-runtime"
  ],
  env:{
    test:{
      plugins: [
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        [
          "@babel/plugin-proposal-class-properties",
          { loose: true }
        ],
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-object-assign",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-transform-runtime"
      ]

    }
  }
};

Upvotes: 14

Views: 9792

Answers (2)

Ismoil Shokirov
Ismoil Shokirov

Reputation: 3011

Follow-up on Aamir Iqubal's answer, I was having the problem with @sentry/react-native, jest was failing. I created a sentryMock.js

It was failing in my file where I had an import like so:

import { captureException } from '@sentry/react-native';

I have test folder in my root directory. So, that's what I had to add to jest.config.js

moduleNameMapper: {
  '@sentry/react-native': '<rootDir>/test/__mocks__/sentryMock.js',
},

In sentryMock.js

export const captureException = jest.fn();

Upvotes: 2

Aamir Iqubal
Aamir Iqubal

Reputation: 327

If you are tying to import any file for example a font file, then simply create a mockFile that just have

// mockFile.ts or mockFile.js
export default {};

and then in jest.config.js

  moduleNameMapper: {
    '^.+\\.(woff2)$': '<rootDir>/<path to file>/mockFile.ts',
  },

This will resolve to the mockFil when it will try to import a font file. You can also add other file extentions like '^.+\\.(jpg|png|woff2)$: '<rootDir>/<path to file>/mockFile.ts'. It should work.

Upvotes: 2

Related Questions