jest энзимный метод в componentDidMount не удается, но консоль показывает, что он работает

Question

Внутри моего componentDidMount() я звоню this.loadData(), если пара функций возвращает true, что они и делают. У меня в журнале есть консольные журналы, которые доказывают, что она вызывает функцию, однако Джест говорит, что она вообще не вызывалась.

Обратите внимание на мои console.log следующих шагов.

1. componentDidMount
2. детализация оценена как истинная
3. ответ не пустой

componentDidMount ()

componentDidMount() {
    console.log('componentDidMount');

    if(props.drilldown) {
        console.log('drilldown');

        // emptyObject is a helper function that makes sure
        // modifiedState.response !== {}

        if(!emptyObject(modifiedState.response)) {
            console.log('response not empty');

            this.loadData(modifiedState.response, modifiedState.lastUpdated);
        }
    }
}

Когда вызывается loadData(), у меня есть еще 3 console.log, которые показаны в моем тестовом выводе.

1. loadData был назван
2. data пройдено
3. updated пройдено

LoadData

loadData(data, updated) {
    console.log('loadData');
    console.log(data);
    console.log(updated);

    ... a bunch of other stuff here that doesn't matter
}

В моем модульном тесте я устанавливаю значения, которые передаются в loadData, следующим образом.

1. data следует оценить до { table: [{}] }
2. updated следует оценить до 'Wed Dec 26 2018 13:26:03 GMT-0500'

модульный тест

it('component mounts as expected', () => {

    const modifiedState = {
        ...parentState,
        lastUpdated: 'Wed Dec 26 2018 13:26:03 GMT-0500',
        response: { table: [{}] }
    }

    const wrapper = shallow(
        <Chart
            chart='testChart'
            comparison='testComparison'
            drilldown={true}
            parentState={modifiedState} />
    );

    const loadData = jest.spyOn(wrapper.instance(), 'loadData');

    expect(loadData).toHaveBeenCalledWith({ table: [{}] }, 'Wed Dec 26 2018 13:26:03 GMT-0500');
    expect(loadData).toHaveBeenCalledTimes(1);

    wrapper.unmount();
  });

Вывод на консоль при запуске моего теста говорит, что loadData was not called и строка, на которую он жалуется, это

expect(loadData).toHaveBeenCalledWith({ table: [{}] }, 'Wed Dec 26 2018 13:26:03 GMT-0500');

Однако, если вы продолжите прокрутку, вы увидите, что все мои console.log вызываются с соответствующей информацией. Это говорит мне, что на самом деле это работает, однако что-то с Jest / Enzyme не правильно.

В качестве примечания, у меня есть 4 другие функции внутри componentDidMount(), которые проходят просто отлично.

вывод журнала консоли при выполнении теста

 FAIL  src/components/Common/Chart.test.js
  ● Drilldown Chart › component mounts as expected

    expect(jest.fn()).toHaveBeenCalledWith(expected)

    Expected mock function to have been called with:
      [{"table": [{}]}, "Wed Dec 26 2018 13:26:03 GMT-0500"]

    But it was not called.

      at Object.fit (src/components/Common/Chart.test.js:140:22)
          at new Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:182:7)

  Chart
    ○ skipped 1 test
  Drilldown Chart
    ✕ component mounts as expected (19ms)
    ○ skipped 11 tests
  Dashboard Chart
    ○ skipped 2 tests

Test Suites: 1 failed, 1 total
Tests:       1 failed, 14 skipped, 15 total
Snapshots:   0 total
Time:        6.515s

Ran all test suites matching "src/components/Common/Chart.test.js".

  console.log src/components/Common/Chart.jsx:45
    componentDidMount

  console.log src/components/Common/Chart.jsx:75
    drilldown

  console.log src/components/Common/Chart.jsx:77
    response not empty

  console.log src/components/Common/Chart.jsx:134
    loadData

  console.log src/components/Common/Chart.jsx:135
    { table: [ {} ] }

  console.log src/components/Common/Chart.jsx:136
    Wed Dec 26 2018 13:26:03 GMT-0500

Answer 1

Мэтью Хербст был прав насчет порядка вещей.

Вы можете сделать это вместо:

it('component mounts as expected', () => {

    const modifiedState = {
        ...parentState,
        lastUpdated: 'Wed Dec 26 2018 13:26:03 GMT-0500',
        response: { table: [{}] }
    }

    const wrapper = shallow(
        <Chart
            chart='testChart'
            comparison='testComparison'
            drilldown={true}
            parentState={modifiedState} />,
        { disableLifecycleMethods: true }
    );
    const instance = wrapper.instance()
    const loadData = jest.spyOn(instance, 'loadData');
    instance.componentDidMount()

    expect(loadData).toHaveBeenCalledWith({ table: [{}] }, 'Wed Dec 26 2018 13:26:03 GMT-0500');
    expect(loadData).toHaveBeenCalledTimes(1);

    wrapper.unmount();
  });

Здесь я отключил методы жизненного цикла с помощью { disableLifecycleMethods: true }. Затем я вручную вызываю componentDidMount после настройки шпиона.

Это немного липко, но это может сработать.