用于测试的模拟 componentDidMount 生命周期方法

IT技术 javascript reactjs jestjs enzyme
2021-05-07 20:54:17

我有一个使用组件axioscomponentDidMount从服务器获取数据。使用 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);
}

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

2个回答

随着对酶的新更新,生命周期方法默认启用。( https://airbnb.io/enzyme/docs/guides/migration-from-2-to-3.html#lifecycle-methods )

但是,您可以使用浅渲染禁用它们,如下所示:

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

文档:https : //airbnb.io/enzyme/docs/api/shallow.html#shallownode-options--shallowwrapper

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

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

在此之前,您可以创建一个间谍componentDidMount来检查它是否被称为

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

并且为了防止 axios 请求到达服务器,您可以使用模拟 axios 调用 moxios