javascript - 在 Enzyme 中，如何允许窗口上可用的函数在构造函数中声明的变量上定义？

Question

谷歌标记组件：

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;
    });
  });

mount调用时测试失败_init并出现错误：

this.marker.addListener is not a function

在手头组件的酶测试中，您如何允许窗口上可用的函数在构造函数中声明的变量上定义？

标签： javascriptreactjsenzymesinonevent-listener

Answer 1

解决方案：

第一次尝试（不正确）：

在测试中，我最终尝试了这样的事情，这是不正确的：

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;
    });
});

第二次尝试（正确）：

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;
    });
});