javascript - Mock componentDidMount lifecycle method for testing - Stack Overflow

admin管理员组

文章数量:1344413

I have a ponent which uses axios within ponentDidMount to retrieve data from the server. When using Jest / Enzyme for unit testing the ponent, the tests fail with a network error.

How do I mock ponentDidMount so that the axios call to the server does not happen?

The ponent in question uses React DnD and is a DragDropContext.

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

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

Example test:

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);
}

So I just need to mock ponentDidMount 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 ponent which does not receive any props.

I have a ponent which uses axios within ponentDidMount to retrieve data from the server. When using Jest / Enzyme for unit testing the ponent, the tests fail with a network error.

How do I mock ponentDidMount so that the axios call to the server does not happen?

The ponent in question uses React DnD and is a DragDropContext.

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

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

Example test:

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);
}

So I just need to mock ponentDidMount 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 ponent which does not receive any props.

• javascript
• reactjs
• jestjs
• enzyme

Share Improve this question Follow asked May 15, 2018 at 7:26 darkpooldarkpool 14.7k1717 gold badges5757 silver badges9393 bronze badges 2

• 1 What if you just reassign it via board.instance().ponentDidMount = jest.fn()? – user9539019 Commented May 15, 2018 at 7:30
• If you are using enzyme you can leverage mount() – Adarsh Commented May 15, 2018 at 7:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

With the new update to enzyme, lifecycle methods are enabled by default. (https://airbnb.io/enzyme/docs/guides/migration-from-2-to-3.html#lifecycle-methods)

However, you can disable them in with shallow rendering as such:

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

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

Lifecyle methods do not defaultly work with shallow, you need to add a flag with shallow

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

Before that you can create a spy on ponentDidMount to check if it was called like

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

and to prevent the axios request from hitting the server , you can mock the axios call using moxios

本文标签： javascriptMock componentDidMount lifecycle method for testingStack Overflow