Javascript 在Ezyme中，如何允许窗口上可用的函数在构造函数中声明的变量上取消定义？
谷歌标记组件：Javascript 在Ezyme中，如何允许窗口上可用的函数在构造函数中声明的变量上取消定义？,javascript,reactjs,enzyme,sinon,event-listener,Javascript,Reactjs,Enzyme,Sinon,Event Listener,谷歌标记组件： import PropTypes from "prop-types"; import React, { Component } from "react"; import ChildComponent from "./info-window"; export default class Marker extends Component { constructor(props) { super(props); this.state = { mark
import PropTypes from "prop-types";
import React, { Component } from "react";
import ChildComponent from "./info-window";
export default class Marker extends Component {
constructor(props) {
super(props);
this.state = {
markerCreated: false
};
this.marker = null;
this._init = this._init.bind(this);
}
componentDidMount() {
this._init();
}
componentWillReceiveProps(nextProps) {
const { position } = this.props;
if (
position.lat !== nextProps.position.lat ||
position.lng !== nextProps.position.lng
) {
this.marker.setPosition(nextProps.position);
}
}
_init() {
const { icon, position, map, title, club } = this.props;
this.marker = new this.props.googleApi.Marker({
icon,
position,
map,
title
});
this.marker.addListener("click", () => {
if (this.props.onSelect) {
this.props.onSelect(club, true);
}
});
this.setState({ markerCreated: true });
}
componentWillUnmount() {
if (this.marker) {
this.marker.setMap(null);
}
}
render() {
return (
this.state.markerCreated && (
<ChildComponent
googleApi={this.props.googleApi}
map={this.props.map}
mapRef={this.props.mapRef}
marker={this.marker}
show={this.props.showInfoWindow}
onSelect={this.props.onSelect}
onDeselect={this.props.onDeselect}
/>
)
);
}
}
Marker.displayName = "Marker";
Marker.propTypes = {
googleApi: PropTypes.object,
map: PropTypes.object,
mapRef: PropTypes.object,
position: PropTypes.shape({
lat: PropTypes.number,
lng: PropTypes.number
}),
title: PropTypes.string,
club: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
showInfoWindow: PropTypes.bool,
onSelect: PropTypes.func,
onDeselect: PropTypes.func
};
import React from "react";
import { shallow } from "enzyme";
import Marker from "src/components/marker";
describe("components/marker", () => {
let props;
let component;
const addListenerSpy = sinon.spy();
beforeEach(() => {
props = {
googleApi: {
Marker: sinon.spy(),
},
map: {},
position: {
lat: 10,
lng: 10
},
title: "title",
club: { id: 1, name: "NAME", state: "CA" },
showInfoWindow: false,
onSelect: sinon.spy()
};
component = shallow(<Marker {...props} />);
it("should render into the document", () => {
expect(component).to.not.be.null;
});
});
在手头组件的酶测试中，如何允许窗口上可用的函数在构造函数中声明的变量上定义？解决方案：
this.marker.addListener is not a function
import React from "react";
import { shallow, mount } from "enzyme";
import Marker from "src/components/marker";
describe("components/marker", () => {
let props;
let component;
const addListenerSpy = sinon.spy();
beforeEach(() => {
props = {
googleApi: {
// Here the spy is added as an object wrapped in parens
Marker: () => ({ addListener: addListenerSpy }),
},
map: {},
position: {
lat: 10,
lng: 10
},
title: "St. Petersburg Sam's Club",
club: { id: 1, name: "NAME", state: "FL" },
showInfoWindow: false,
content: "<div></div>",
onSelect: sinon.spy()
};
component = shallow(<Marker {...props} />);
it("should render into the document", () => {
expect(component).to.not.be.null;
});
});
import React from "react";
import { shallow } from "enzyme";
import Marker from "src/components/marker";
describe("components/marker", () => {
let props;
let component;
const addListenerSpy = sinon.spy();
beforeEach(() => {
props = {
googleApi: {
Marker: () => {
// incorrect
this.addListener = sinon.spy();
},
},
map: {},
position: {
lat: 10,
lng: 10
},
title: "title",
club: { id: 1, name: "NAME", state: "CA" },
showInfoWindow: false,
onSelect: sinon.spy()
};
component = shallow(<Marker {...props} />);
it("should render into the document", () => {
expect(component).to.not.be.null;
});
});
从“React”导入React；
从“酶”中导入{shall}；
从“src/components/Marker”导入标记；
描述（“组件/标记”，（）=>{
让道具；
let组件；
const addListenerSpy=sinon.spy（）；
在每个之前（（）=>{
道具={
古格里皮：{
标记：（）=>{
//不正确
this.addListener=sinon.spy（）；
},
},
映射：{}，
职位：{
拉脱维亚：10，
液化天然气：10
},
标题：“标题”，
俱乐部：{id:1，姓名：“姓名”，州：“CA”}，
showInfoWindow:false，
onSelect:sinon.spy（）
};
组件=浅（）；
它（“应该呈现到文档中”，（）=>{
expect（component）.to.not.be.null；
});
});
this.marker.addListener is not a function
import React from "react";
import { shallow, mount } from "enzyme";
import Marker from "src/components/marker";
describe("components/marker", () => {
let props;
let component;
const addListenerSpy = sinon.spy();
beforeEach(() => {
props = {
googleApi: {
// Here the spy is added as an object wrapped in parens
Marker: () => ({ addListener: addListenerSpy }),
},
map: {},
position: {
lat: 10,
lng: 10
},
title: "St. Petersburg Sam's Club",
club: { id: 1, name: "NAME", state: "FL" },
showInfoWindow: false,
content: "<div></div>",
onSelect: sinon.spy()
};
component = shallow(<Marker {...props} />);
it("should render into the document", () => {
expect(component).to.not.be.null;
});
});
从“React”导入React；
从“酶”中导入{shall，mount}；
从“src/components/Marker”导入标记；
描述（“组件/标记”，（）=>{
让道具；
let组件；
const addListenerSpy=sinon.spy（）；
在每个之前（（）=>{
道具={
古格里皮：{
//在这里，间谍被添加为包装在parens中的对象
标记：（）=>（{addListener:addListenerSpy}），
},
映射：{}，
职位：{
拉脱维亚：10，
液化天然气：10
},
标题：“圣彼得堡山姆俱乐部”，
俱乐部：{id:1，姓名：“姓名”，州：“FL”}，
showInfoWindow:false，
内容：“，
onSelect:sinon.spy（）
};
组件=浅（）；
它（“应该呈现到文档中”，（）=>{
expect（component）.to.not.be.null；
});
});
this.variable.addListenerthis.marker.addListenerthis.marker