問題測試用笑話實現 react-leaflet map 的 react 組件

Question

當我嘗試測試實現 react-leaflet 庫的 react 組件時出現以下問題

    C:\digital-booking-ui\node_modules\react-leaflet\lib\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { useMap, useMapEvent, useMapEvents } from './hooks.js';
                                                                                  ^^^^^^

SyntaxError: Unexpected token 'export'

  1 | import React from "react";
  2 | import { makeStyles } from "@material-ui/core";
> 3 | import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
    | ^
  4 |
  5 | const Map = () => {
  6 |   const classes = useStyles();

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
  at Object.<anonymous> (src/components/accomodation/Map.js:3:1)

我在 inte.net 上搜索問題，發現的建議對我不起作用。

當我嘗試呈現與該庫有關系的任何組件時會發生此錯誤，例如 App.test.js

import { render, screen, prettyDOM } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect'
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { ThemeProvider } from '@material-ui/core';
import theme from "./theme";

let component = null;

beforeEach(() => {
    component = render(
      <BrowserRouter>
        <ThemeProvider theme={theme}>
          <App />
        </ThemeProvider>
      </BrowserRouter>
    );
}
);

test('render App', () => {
  expect(component).toBeTruthy();
});

我該如何解決這個問題？ 這似乎是 Jest 無法識別組件導出的問題

Answer 1

嘗試替換 package JSON 文件中的以下代碼：

  "scripts": {
  "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!your-module-name)/\"",
},

它會起作用的。

Answer 2

在您的 package.json 添加這些行

"jest": {   
    "moduleNameMapper": {
      "react-leaflet": "<rootDir>/mocks/reactLeafletMock.js"
    }
  }

然后在“模擬”文件夾（或任何你想要的）中添加一個 reactLeafletMock.js 模塊，該模塊返回一個空的 object

module.exports = {}

應該沒問題（它對我有用）

您最終可以在 object 中添加“react-leaflet”鈎子以避免來自 Jest 的其他錯誤

module.exports = {
    useMapEvents: () => {}
}