模拟componentDidMount生命周期方法进行测试 [英] Mock componentDidMount lifecycle method for testing
问题描述
我有一个组件,该组件使用componentDidMount
中的axios
从服务器检索数据.使用Jest/Enzyme对组件进行单元测试时,测试将失败,并出现网络错误.
I have a component which uses axios
within componentDidMount
to retrieve data from the server. When using Jest / Enzyme for unit testing the component, the tests fail with a network error.
如何模拟componentDidMount
,以便不会发生对服务器的axios
调用?
How do I mock componentDidMount
so that the axios
call to the server does not happen?
有问题的组件使用 React DnD ,并且一个DragDropContext
.
The component in question uses React DnD and is a 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()
.但是,这是我的顶级组件,没有任何道具.
So I just need to mock componentDidMount
or load_data
so that it doesn't try to call the server. If the load_data
method was being passed in as a prop, I could simply set that prop to jest.fn()
. However this is my top level component which does not receive any props.
推荐答案
默认情况下,Lifecyle方法不适用于浅表,您需要添加带有浅表的标记
Lifecyle methods do not defaultly work with shallow, you need to add a flag with shallow
const board = shallow(<Board />, { lifecycleExperimental: true });
在此之前,您可以在componentDidMount
上创建间谍,以检查其名称是否为
Before that you can create a spy on componentDidMount
to check if it was called like
const spyCDM = jest.spyOn(Board.prototype, 'componentDidMount');
并且为了防止axios请求到达服务器,您可以使用 moxios
and to prevent the axios request from hitting the server , you can mock the axios call using moxios
这篇关于模拟componentDidMount生命周期方法进行测试的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!