Тестирование Cropper JS с использованием Jest и Enzyme - PullRequest
Новая
       47

Тестирование Cropper JS с использованием Jest и Enzyme

0 голосов
/ 25 февраля 2020

Я использую Reaction-Cropper в моем проекте, и у меня возникли некоторые проблемы при его тестировании. Вот код из моего родительского компонента CropperParent, который вызывает Cropper: 

render() {
onReady = () => {
    const { height, width } = this.cropperRef.current.cropper.imageData;
    this.setState({
      scale: width / height,
    });
  };

return (
      <div>
        <Cropper
          ref={this.cropperRef}
          src={imageSource}
          ready={this.onReady}
          style={{ width: "100%" }}
          modal={false}
          autoCrop={false}
          aspectRatio={aspectRatio}
          guides={false}
          viewMode={3}
          restore={false}
          responsive={true}
          imageSmoothingEnabled={false}
          imageSmoothingQuality="high"
        />
)}

Я использую Jest и Enzyme для тестирования, и после запуска следующего теста я вижу, что метод onReady вызывается дважды, как я вижу 2x в дополнение к этому в отчете о покрытии кода (но не уверен, означает ли это, что onReady действительно был выполнен), но его оператор деструктурирования не выполняется. Я считаю, что Cropper запускает событие ready (см. Реквизиты для Cropper выше), когда компонент смонтирован на DOM, а образ полностью загружен. 

describe("CropperParent component", () => {
    const wrapper = mount(<CropperParent
        imageSource={testImage} />);

    it('should render correctly', () => {
         expect(wrapper).toMatchSnapshot();  // passes
    });

    it("renders Cropper component", () => {
        expect(wrapper.find(Cropper)).toHaveLength(1);  // passes
    });
});

testImage - относительный путь к реальному изображению в формате JPEG. В чем может быть причина того, что const { height, width } = this.cropperRef.current.cropper.imageData не будет казнен?

...