Saya memiliki komponen yang menggunakan axios dalam componentDidMount untuk mengambil data dari server. Saat menggunakan Jest / Enzyme untuk pengujian unit komponen, pengujian gagal dengan kesalahan jaringan.

Bagaimana cara mengejek componentDidMount sehingga panggilan axios ke server tidak terjadi?

Komponen yang dimaksud menggunakan React DnD dan merupakan DragDropContext.

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

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

Contoh tes:

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

Jadi saya hanya perlu mengejek componentDidMount atau load_data agar tidak mencoba memanggil server. Jika metode load_data diteruskan sebagai prop, saya cukup menyetel prop itu ke jest.fn(). Namun ini adalah komponen tingkat atas saya yang tidak menerima alat peraga apa pun.

3
darkpool 15 Mei 2018, 10:26

2 jawaban

Jawaban Terbaik

Metode siklus hidup tidak bekerja secara default dengan dangkal, Anda perlu menambahkan bendera dengan dangkal

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

Sebelum itu Anda dapat membuat mata-mata di componentDidMount untuk memeriksa apakah itu disebut seperti

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

Dan untuk mencegah permintaan axios mengenai server , Anda dapat mengejek panggilan axios menggunakan moxios

4
Shubham Khatri 15 Mei 2018, 07:39

Dengan pembaruan baru untuk enzim, metode siklus hidup diaktifkan secara default. (https://airbnb.io/ enzyme/docs/guides/migration-from-2-to-3.html#lifecycle-methods)

Namun, Anda dapat menonaktifkannya dengan rendering dangkal seperti:

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

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

6
Alex Mutricy 10 Juli 2019, 23:18