Question

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

如何模拟componentDidMount以便{@ 1}}对服务器的调用不会发生？

相关组件使用React DnD并且是axios。

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。然而，这是我的顶级组件，没有任何道具。

Answer 1

生命周期方法默认情况下不浅，您需要添加浅层标记

 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

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

2 个答案: