Тестирование компонента React, который использует jQuery и объект окна

Мой компонент React должен реагировать на событие resize, для которого я использую jQuery, то есть:

//...
componentDidMount: function() {
  $(window).on("resize", function);
}
//..

Однако это вызывает проблемы с моим тестом Jest, а именно:

- TypeError: Cannot read property 'on' of undefined
    at RadiumEnhancer.React.createClass.componentDidMount (bundles/Opportunities/OpportunityPartial.jsx:21:14)

При прохождении теста кажется, что окно определено в шутливом тесте, но $(window), похоже, ничего не возвращает.

У меня сложилось впечатление, что Jest проверит API требуемого модуля (jQuery) для создания своего макета, но если я правильно понимаю проблему, кажется, что этого не происходит?

Я могу обойти это, не издеваясь над jQuery, но, очевидно, это не совсем предпочтительно.


reactjs javascript unit-testing jestjs jquery
person ttrmw    schedule 18.03.2016    source источник
comment
Я не уверен, правильно это или нет, но у меня был успех с beforeAll ( () => { window.jQuery = require( 'jquery' ); });. Или window.$ в вашем случае.   -  person Tim Malone    schedule 12.10.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вот решение модульного теста с использованием jestjs и enzyme:

index.tsx:

import React, { Component } from 'react';
import $ from 'jquery';

class SomeComponent extends Component {
  componentDidMount() {
    $(window).on('resize', this.resizeEventHandler);
  }

  resizeEventHandler() {
    console.log('resize event handler');
  }

  render() {
    return <div>some component</div>;
  }
}

export default SomeComponent;

index.spec.tsx:

import React from 'react';
import SomeComponent from './';
import { shallow } from 'enzyme';
import $ from 'jquery';

jest.mock('jquery', () => {
  const m$ = {
    on: jest.fn(),
  };
  return jest.fn(() => m$);
});

describe('36082197', () => {
  afterEach(() => {
    jest.restoreAllMocks();
    jest.resetAllMocks();
  });
  it('should pass', () => {
    const logSpy = jest.spyOn(console, 'log');
    const eventHandlerMap = {};
    ($().on as jest.MockedFunction<any>).mockImplementation((event, handler) => {
      eventHandlerMap[event] = handler;
    });
    const wrapper = shallow(<SomeComponent></SomeComponent>);
    const instance = wrapper.instance();
    expect(wrapper.text()).toBe('some component');
    expect($).toBeCalledWith(window);
    // tslint:disable-next-line: no-string-literal
    expect($(window).on).toBeCalledWith('resize', instance['resizeEventHandler']);
    eventHandlerMap['resize']();
    expect(logSpy).toBeCalledWith('resize event handler');
  });
});

Результат модульного теста со 100% покрытием:

 PASS  src/stackoverflow/36082197/index.spec.tsx (12.045s)
  36082197
    ✓ should pass (18ms)

  console.log node_modules/jest-mock/build/index.js:860
    resize event handler

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.tsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        14.267s, estimated 15s

Исходный код: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/36082197

person slideshowp2    schedule 10.12.2019