componentDidMount中的jest酶测试方法失败，但控制台显示它正在工作

Question

在我的componentDidMount()中，如果有几个函数返回true，我将调用this.loadData()，它们确实返回了true。我的代码中有控制台日志，这些日志向我证明它正在调用该函数，但Jest说它根本没有被调用。

请注意以下步骤的console.log。

1. 组件DidMount
2. 向下钻取评估为true
3. 响应不为空

组件DidMount()

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(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/酶的某些事情是不对的。

顺便说一句，我在componentDidMount()中还有4个其他函数，它们通过得很好。

运行测试时的控制台日志输出

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

Matthew Herbst对事物的顺序是正确的。

你可以这样做：

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。

它有点俗气，但它可以工作。