Javascript 如何使用Jest+测试google maps函数是否在componentDidUpdate（）上运行；酶？_Javascript_Reactjs_Google Maps_Jestjs_Enzyme

Javascript 如何使用Jest+测试google maps函数是否在componentDidUpdate（）上运行；酶？

javascript reactjs google-maps jestjs

Javascript 如何使用Jest+测试google maps函数是否在componentDidUpdate（）上运行；酶？,javascript,reactjs,google-maps,jestjs,enzyme,Javascript,Reactjs,Google Maps,Jestjs,Enzyme,我还不熟悉TDD的Jest和Ezyme，在测试我的GoogleMap组件时遇到了一个问题组件从my API接收GeoJson数据作为道具，该API可能会更改，因此init函数应该在componentDidUpdate（）上运行 Map.js import React, { Component } from 'react'; class Map extends Component { initMap = () => { const el = document.ge

我还不熟悉TDD的Jest和Ezyme，在测试我的GoogleMap组件时遇到了一个问题

组件从my API接收GeoJson数据作为道具，该API可能会更改，因此init函数应该在componentDidUpdate（）上运行

Map.js

import React, { Component } from 'react';

class Map extends Component {
    initMap = () => {
        const el = document.getElementById("map-js");

        const options = {
            center: {
                lat: -27.9959656,
                lng: 153.2879044,
            },
            zoom: 9
        };

        const map = new window.google.maps.Map(el, options);
        map.data.addGeoJson(this.props.data);
    };

    componentDidUpdate(){
        this.initMap();
    };

    render() {
        return(
            <div className="map__holder">
                <div id="map-js"></div>
            </div>
        );
    };
};

export default Map;

import React，{Component}来自'React'；
类映射扩展组件{
initMap=（）=>{
const el=document.getElementById（“map js”）；
常量选项={
中心：{
lat:-27.9959656，
液化天然气：153.2879044，
},
缩放：9
};
const map=new window.google.maps.map（el，选项）；
map.data.addGeoJson（this.props.data）；
};
componentDidUpdate（）{
this.initMap（）；
};
render（）{
返回(
);
};
};
导出默认地图；

我正在尝试编写一个测试，以检查在更改道具时initMap函数是否成功运行

我不确定向浅层渲染传递道具的最佳方式，所以我只使用Json文件中的第一个值。下面是我的测试

当我运行此命令时，我不断收到以下错误“TypeError:无法读取未定义的属性“maps”

有人能就如何通过这次考试提出建议吗

Map.test.js

import React from 'react';
import { shallow } from 'enzyme';
import Map from '../Map';

it("runs init map on component update", () => {
    const props = {
        "type": "FeatureCollection",
        "totalFeatures": 1,
        "features": [{
            "type": "Feature",
            "id": "af1b8d1c_a186_4e72_8e9e_549a8065e970.1",
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [153.29237339772322, -27.897575560605485],
                            [153.29240999654635, -27.897600934719307],
                            [153.29243164508424, -27.897612892477547],
                            [153.29242807749804, -27.89762571619733],
                            [153.2924182348173, -27.897642434997323],
                            [153.29240518208437, -27.89764887031301],
                            [153.29238402481764, -27.897632940370542],
                            [153.29236010912982, -27.897619001393466],
                            [153.29233897564296, -27.8976119164061],
                            [153.29237339772322, -27.897575560605485]
                        ]
                    ]
                ]
            },
            "geometry_name": "geom",
            "properties": {
                "rec_id": 1598139,
                "status": "CURRENT",
                "asset_numb": "BOAR320",
                "type": "Boat Ramp",
                "material": "Gravel",
                "number_lan": 1,
                "add_improv": "f",
                "top_rl": 0,
                "toe_rl": 0,
                "area_": 36.079,
                "comments": "Council use only",
                "documents": "../photos/31/j31p6.jpg",
                "inspectors": null,
                "inspection": "2009-09-23Z",
                "constructi": null,
                "record_cre": "2007-04-27Z",
                "last_updat": null,
                "update_dat": "2011-07-22Z",
                "disposal_d": null,
                "positional": "GPS Corrected 1.0M",
                "level_accu": null,
                "owner": "251",
                "project_nu": null,
                "file_numbe": null,
                "folder_num": null,
                "drawing_nu": null,
                "survey_num": null,
                "condition": 4,
                "historic_c": 0,
                "funding_ba": "Non GCCC",
                "mi_symbolo": "Pen (2, 2, 65535) Brush (1, 0, 16777215)",
                "mi_prinx": 1598139,
                "createuser": null,
                "createdate": null,
                "updateuser": null,
                "updatedate": null,
                "shape_leng": 25.1301720763,
                "shape_area": 36.0791723381
            }
        }]
    };

    const updatedProps = {
        "type": "FeatureCollection",
        "totalFeatures": 2, //value changed in updated props
        "features": [{
            "type": "Feature",
            "id": "af1b8d1c_a186_4e72_8e9e_549a8065e970.1",
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [153.29237339772322, -27.897575560605485],
                            [153.29240999654635, -27.897600934719307],
                            [153.29243164508424, -27.897612892477547],
                            [153.29242807749804, -27.89762571619733],
                            [153.2924182348173, -27.897642434997323],
                            [153.29240518208437, -27.89764887031301],
                            [153.29238402481764, -27.897632940370542],
                            [153.29236010912982, -27.897619001393466],
                            [153.29233897564296, -27.8976119164061],
                            [153.29237339772322, -27.897575560605485]
                        ]
                    ]
                ]
            },
            "geometry_name": "geom",
            "properties": {
                "rec_id": 1598139,
                "status": "CURRENT",
                "asset_numb": "BOAR320",
                "type": "Boat Ramp",
                "material": "Gravel",
                "number_lan": 1,
                "add_improv": "f",
                "top_rl": 0,
                "toe_rl": 0,
                "area_": 36.079,
                "comments": "Council use only",
                "documents": "../photos/31/j31p6.jpg",
                "inspectors": null,
                "inspection": "2009-09-23Z",
                "constructi": null,
                "record_cre": "2007-04-27Z",
                "last_updat": null,
                "update_dat": "2011-07-22Z",
                "disposal_d": null,
                "positional": "GPS Corrected 1.0M",
                "level_accu": null,
                "owner": "251",
                "project_nu": null,
                "file_numbe": null,
                "folder_num": null,
                "drawing_nu": null,
                "survey_num": null,
                "condition": 4,
                "historic_c": 0,
                "funding_ba": "Non GCCC",
                "mi_symbolo": "Pen (2, 2, 65535) Brush (1, 0, 16777215)",
                "mi_prinx": 1598139,
                "createuser": null,
                "createdate": null,
                "updateuser": null,
                "updatedate": null,
                "shape_leng": 25.1301720763,
                "shape_area": 36.0791723381
            }
        }]
    };

    const wrapper = shallow(<Map data={props} />);
    const spy = jest.spyOn(wrapper.instance(), 'initMap');

    wrapper.setProps({data: updatedProps});

    expect(spy).toBeCalled();
});

从“React”导入React；
从“酶”导入{shall}；
从“../Map”导入映射；
它（“在组件更新时运行init map”，（）=>{
常量道具={
“类型”：“FeatureCollection”，
"总体特征":1,，
“特点”：[{
“类型”：“功能”，
“id”：“af1b8d1c_a186_4e72_8e9e_549a8065e970.1”，
“几何学”：{
“类型”：“多多边形”，
“坐标”：[
[
[
[153.29237339772322, -27.897575560605485],
[153.29240999654635, -27.897600934719307],
[153.29243164508424, -27.897612892477547],
[153.29242807749804, -27.89762571619733],
[153.2924182348173, -27.897642434997323],
[153.29240518208437, -27.89764887031301],
[153.29238402481764, -27.897632940370542],
[153.29236010912982, -27.897619001393466],
[153.29233897564296, -27.8976119164061],
[153.29237339772322, -27.897575560605485]
]
]
]
},
“几何图形名称”：“几何图形”，
“财产”：{
“记录id”：1598139，
“状态”：“当前”，
“资产编号”：“BOAR320”，
“类型”：“船舶坡道”，
“材料”：“砾石”，
“数字局域网”：1，
“添加即兴”：“f”，
“顶部”：0，
“脚趾”：0，
“面积”：36.079，
“评论”：“仅供议会使用”，
“文件”：“./photos/31/j31p6.jpg”，
“检查员”：空，
“检查”：“2009-09-23Z”，
“constructi”：空，
“记录”：“2007-04-27Z”，
“上次更新”：null，
“更新日期”：“2011-07-22Z”，
“处置”：空，
“定位”：“GPS校正1.0M”，
“累计液位”：空，
“所有者”：“251”，
“项目菜单”：空，
“文件编号”：空，
“文件夹数量”：空，
“绘图菜单”：空，
“调查数量”：空，
“条件”：4，
“历史性的”：0，
“供资”：“非GCCC”，
“mi_symbolo”：“钢笔（2,265535）画笔（1,0,16777215）”，
“mi_prinx”：1598139，
“createuser”：空，
“createdate”：空，
“updateuser”：null，
“updatedate”：空，
“shape_leng”：25.1301720763，
“形状区域”：36.0791723381
}
}]
};
const updatedProps={
“类型”：“FeatureCollection”，
“totalFeatures”：2，//在更新的道具中更改了值
“特点”：[{
“类型”：“功能”，
“id”：“af1b8d1c_a186_4e72_8e9e_549a8065e970.1”，
“几何学”：{
“类型”：“多多边形”，
“坐标”：[
[
[
[153.29237339772322, -27.897575560605485],
[153.29240999654635, -27.897600934719307],
[153.29243164508424, -27.897612892477547],
[153.29242807749804, -27.89762571619733],
[153.2924182348173, -27.897642434997323],
[153.29240518208437, -27.89764887031301],
[153.29238402481764, -27.897632940370542],
[153.29236010912982, -27.897619001393466],
[153.29233897564296, -27.8976119164061],
[153.29237339772322, -27.897575560605485]
]
]
]
},
“几何图形名称”：“几何图形”，
“财产”：{
“记录id”：1598139，
“状态”：“当前”，
“资产编号”：“BOAR320”，
“类型”：“船舶坡道”，
“材料”：“砾石”，
“数字局域网”：1，
“添加即兴”：“f”，
“顶部”：0，
“脚趾”：0，
“面积”：36.079，
“评论”：“仅供议会使用”，
“文件”：“./photos/31/j31p6.jpg”，
“检查员”：空，
 PASS  src/stackoverflow/64635170/Map.test.js (10.908s)
  64635170
    ✓ should pass (9ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 Map.js   |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        13.063s