模拟componentDidMount生命周期方法进行测试

Question

我有一个使用组件axios内componentDidMount从服务器获取数据。 当使用Jest / Enzyme对组件进行单元测试时，测试会因网络错误而失败。

如何模拟componentDidMount以便不会发生对服务器的axios调用？

有问题的组件使用React DnD并且是DragDropContext 。

class Board extends Component {
    componentDidMount() {
        this.load_data();
    }

    load_data = () => {
        // axios server calls here
    }
}
export default DragDropContext(HTML5Backend)(Board);

示例测试：

it('should do something', () => {
    const board = shallow(<Board />);
    // get the boardInstance because board is wrapped in Reactdnd DragDropContext
    const boardInstance = board.dive().instance();
    boardInstance.callSomeMethodToTestIt();
    expect(testSomething);
}

所以我只需要模拟componentDidMount或load_data这样它就不会尝试调用服务器。 如果load_data方法作为prop传入，我可以简单地将该prop设置为jest.fn() 。 然而，这是我的顶级组件，没有任何道具。

Answer 1

Lifecyle方法默认不用浅，你需要添加一个浅的标志

 const board = shallow(<Board />, { lifecycleExperimental: true });

在此之前，您可以在componentDidMount上创建一个间谍来检查它是否被调用

const spyCDM = jest.spyOn(Board.prototype, 'componentDidMount');

并且为了防止axios请求命中服务器，您可以使用moxios模拟axios调用

Answer 2

随着酶的新更新，默认情况下启用生命周期方法。 （ https://airbnb.io/enzyme/docs/guides/migration-from-2-to-3.html#lifecycle-methods ）

但是，您可以使用浅渲染禁用它们：

const board = shallow(<Board />, { disableLifecycleMethods: true });

docs： https ： //airbnb.io/enzyme/docs/api/shallow.html#shallownode-options--shallowwrapper