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

【问题标题】：Mock componentDidMount lifecycle method for testing模拟 componentDidMount 生命周期方法进行测试
【发布时间】：2023-03-09 05:42:01
【问题描述】：

我有一个组件在componentDidMount 中使用axios 从服务器检索数据。当使用 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 方法作为道具传入，我可以简单地将该道具设置为jest.fn()。然而，这是我没有收到任何道具的顶级组件。

【问题讨论】：

如果你只是通过board.instance().componentDidMount = jest.fn()重新分配它呢？
如果您使用酶，您可以利用mount()

标签： javascript reactjs jestjs enzyme

【解决方案1】：

随着酶的新更新，生命周期方法默认启用。 (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

【讨论】：

【解决方案2】：

Lifecyle 方法默认不使用浅层，您需要添加一个带有浅层的标志

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

在此之前，您可以在 componentDidMount 上创建一个间谍以检查它是否被称为类似

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

为了防止 axios 请求访问服务器，您可以使用 moxios

模拟 axios 调用

【讨论】：