反应传单：使用边界选项时运行测试的'Invalid LatLng object'

Question

我用react-leaflet构建了一个简单的应用程序来显示地图。应用程序本身正在运行，并且地图在浏览器中正确显示。但是当我尝试使用 react-testing-library 编写测试时，我在使用boundsOptions时收到执行中的Invalid LatLng object'。如果我删除边界选项属性，测试将通过。

地图.tsx

import "leaflet/dist/leaflet.css";
import React from "react";
import {
LayersControl,
Marker,
Polyline,
TileLayer,
Tooltip,
Map
} from "react-leaflet";
import './Map.css';
const { BaseLayer } = LayersControl;
const MapWrapper: React.FC = ({ ...props }) => {
const layers = [
{
name: "OpenStreetMap.Mapnik",
attribution:
'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
}
];
const bounds: [number, number][] = [];
[...] // Code that calculates the bounds to show (in production)
if (bounds.length === 0) {
bounds.push([35, -35]);
bounds.push([65, 55]);
}
return (
<Map bounds={bounds} boundsOptions={{ padding: [5, 5] }} className="map">
<LayersControl position="topright">
{layers.map(layer => {
return (
<BaseLayer
key={layer.url}
checked={true}
name={layer.name}
>
<TileLayer attribution={layer.attribution} url={layer.url} />
</BaseLayer>
);
})}
</LayersControl>
</Map>
);
};

地图.css

.map {
height: 400px;
width: 640px;
}

Map.test.tsx

import React from 'react'
import MapWrapper from './Map';
import {render, fireEvent, cleanup} from '@testing-library/react';
afterEach(cleanup)
test('Simple test', () => {
const { getByTestId } = render(<MapWrapper />)
})

测试出错

console.error node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Uncaught [Error: Invalid LatLng object: (NaN, NaN)]
at reportException (C:Reposreact-leaflet-jestnode_modulesjest-environment-jsdomnode_modulesjsdomlibjsdomlivinghelpersruntime-script-errors.js:66:24)
...
console.error node_modules/react-dom/cjs/react-dom.development.js:19814
The above error occurred in the <TileLayer> component:
in TileLayer (created by Context.Consumer)

您可以在此处找到代码：https://bitbucket.org/netcoding/react-leaflet-jest/src/master/

如何使用边界选项设置反应传单以通过测试？

Answer 1

这似乎是一个已知问题，也可以重现，例如在 Jest 中。出现异常的原因是，在渲染地图时无法正确确定映射容器大小(在测试中)。

解决方案是显式设置地图容器大小，在这种情况下react-leaflet库地图容器大小可以像这样设置：

const { leafletElement: map } = this.mapRef.current as Map;
const container = map.getContainer(); //get leaflet map container
Object.defineProperty(container, "clientWidth", { value: 800 });
Object.defineProperty(container, "clientHeight", { value: 600 });

下面是有关如何测试地图边界的完整示例：

test("Map test bounds", () => {
class TestComponent extends React.Component<any, any> {
mapRef: React.RefObject<Map>;
constructor(props: any) {
super(props);
this.mapRef = React.createRef();
}
componentDidMount() {
this.updateBoundsOptions();
}
resizeContainer(container: HTMLElement) {
Object.defineProperty(container, "clientWidth", { value: 800 });
Object.defineProperty(container, "clientHeight", { value: 600 });
}
updateBoundsOptions() {
const { leafletElement: map } = this.mapRef.current as Map;
const container = map.getContainer(); //get leaflet map container
this.resizeContainer(container);
map.fitBounds(this.props.bounds, this.props.boundsOptions);
}
render() {
return (
<MapWrapper mapRef={this.mapRef}>
<span />
</MapWrapper>
);
}
}
render(
<TestComponent
bounds={[[35, -35], [65, 55]]}
boundsOptions={{ padding: [5, 5] }}
/>
);
});

其中MapWrapper是自定义组件：

export interface MapWrapperProps extends MapProps {
mapRef?: React.RefObject<Map>;
}
const MapWrapper: React.FC<MapWrapperProps> = ({ ...mapProps }) => {
return (
<Map ref={mapProps.mapRef} {...mapProps}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
</Map>
);
};