问题测试用jest实现反应-传单映射的反应组件

Question

当我尝试测试实现react-传单库的react组件时，我有以下问题

C:digital-booking-uinode_modulesreact-leafletlibindex.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)

我在网上搜索了这个问题，我找到的推荐对我不起作用。

当我试图渲染任何与该库有关系的组件时，例如，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

在您的jest.config.js中添加以下行

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

然后在"mocks"添加一个reactLeafletMock.js模块，返回一个空对象

module.exports = {}

应该没问题(它为我工作)

您最终可以添加"react-leaflet"以避免Jest

的其他错误。

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