React Jest - TypeError: (0 , _[....]) 不是函数答案

【问题标题】：React Jest - TypeError: (0 , _[....]) is not a functionReact Jest - TypeError: (0 , _[....]) 不是函数
【发布时间】：2021-05-01 07:34:25
【问题描述】：

我正在尝试使用 Jest 为 React 应用程序创建单元测试，但不幸的是，在将任何组件导入我的测试后出现错误。该错误出现在我拥有的每个功能上。该应用程序是使用 Create React App 创建的，这个问题在我项目中的每个函数上都会重复出现。

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();

package.json 上的 Jest 配置

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

运行纱线测试时出错

 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)

这个函数 (generateUUID) 和所有其他带有 export const 的函数都给我同样的错误。

这里有人遇到过同样的问题吗？我认为可能是一个 babel 配置或类似的东西。谢谢你的帮助？？？？

【问题讨论】：

您解决了这个问题吗？我也有类似的问题。

标签： javascript reactjs jestjs babel-jest

【解决方案1】：

我也遇到了同样奇怪的问题…… 在我的例子中，我有一个名为feature.js 的文件，就在我想导入feature.ts 的真实文件旁边。这个文件可能是我错误地运行 tsc 时出现的（或者 webstorm 为我做的......）

据我了解，jest 尝试导入 .js 文件而不是 .ts 一个

删除feature.js 解决了这个问题。 PS：我正在运行 TS 4.5。

【讨论】：