В Enzyme, как вы разрешаете определение функции, доступной в окне, для переменной, объявленной в конструкторе?

Question

Компонент GoogleMarker:

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

Тест GoogleMarker:

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

В тесте «Фермент» для рассматриваемого компонента как разрешить определение функции, доступной в окне, для определения переменнойобъявлено в конструкторе?

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