React Jest - TypeError: (0 , _[....]) is not a function

Question

I'm trying to create unit tests with Jest for a React application and unfortunelly getting errors after importing any component into my tests. The error appears on every function that I have. The application is created with Create React App and this problem repeats on every function that I have on my project.

index.js

import 'react-app-polyfill/ie11';
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import Settings from './AppEnvironment';
import intl from 'react-intl-universal';
import { Provider } from 'mobx-react';
import { stores } from '~/stores';
import { HashRouter as Router } from 'react-router-dom';
import 'antd/dist/antd.css';
import './assets/stylesheets/styles.scss';
import App from './App';
import ReactBreakpoints from 'react-breakpoints';
import { breakpoints } from '~/utils/BreakPoints';
import AppProvider from './hooks';
import { initialize } from '@TruckPad/truckpad-analytics';
import { initializeGTM, initializeBlip } from '~/services/external';
import { resetLogin } from './utils/Utils';

initialize([Settings.gtag, Settings.utag]);

initializeGTM();
initializeBlip(
  'YXRoZW5hcm91dGVyOjIxN2U2ODdlLTk3MTUtNDE0NC04ZjJiLTNkNTZhNmQ1MGY1NQ==',
  Settings.environment === 'production',
);

const locales = {
  'pt-BR': require('./locales/pt-BR.json'),
  'en-US': require('./locales/en-US.json'),
};
const currentLocale = locales[navigator.language] ? navigator.language : 'pt-BR';

intl.init({
  currentLocale,
  locales,
});

console.log('Environment: ' + Settings.environment);
console.log('Version: ' + Settings.version);
resetLogin();
ReactDOM.render(
  <Provider {...stores}>
    <AppProvider>
      <ReactBreakpoints breakpoints={breakpoints}>
        <Router baseline="/">
          <App />
        </Router>
      </ReactBreakpoints>
    </AppProvider>
  </Provider>,
  document.getElementById('root'),
);

serviceWorker.unregister();

Jest config on package.json

  "jest": {
    "moduleNameMapper": {
      "~/(.*)": "<rootDir>/src/",
      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
    }
  }

Error when running yarn test

 FAIL  src/pages/Shipments/List/ShipmentsList.spec.js
  ● Test suite failed to run

    TypeError: (0 , _Utils.generateUUID) is not a function

      283 | export const stoppingPointEmpty = {
      284 |   action: '',
    > 285 |   key: generateUUID(),
          |        ^
      286 |   address: {
      287 |     street_name: '',
      288 |     street_number: '',

      at Object.<anonymous> (src/components/Commons.js:285:8)
      at Object.<anonymous> (src/stores/VehicleStore.js:5:1)
      at Object.<anonymous> (src/utils/GenericClass.js:4:1)
      at Object.<anonymous> (src/App.js:14:1)
      at Object.<anonymous> (src/index.js:12:1)
      at Object.<anonymous> (src/pages/Shipments/List/ShipmentsList.js:3:1)
      at Object.<anonymous> (src/pages/Shipments/List/ShipmentsList.spec.js:2:1)

This function (generateUUID) and every other function with export const is giving me the same errors.

Anyone here ever have the same problem? I think probably is an babel config or something like that. Thanks for the help 😊

Answer 1

I had the same weird issue… In my case I had a file called feature.js just next to the real file I wanted to import feature.ts.

The .js file probably appeared when I ran tsc by mistake (or webstorm did it for me…)

In my understanding, jest tried to import the .js file instead of the .ts one

Removing feature.js fixed the problem. PS: I am running TS 4.5.