Dlaczego te mocki się nie resetują?

Question

Cześć.

Piszę apkę z wykorzystaniem NextJs. Do testowania używam Jest, React Testing Library oraz Nock do mockowania requestów axiosa (samo użycie tej biblioteki nie jest przyczyną problemu). Utknąłem na testach, problem polega na tym, że chciałbym aby mocki resetowały się po każdym it(), ale tak się nie dzieje i w drugim teście nadal jest zwracany json z pierwszego testu.

 

describe('Contacts component', () => {
    beforeEach(() => {
        nock.disableNetConnect();

        nock(BACKEND_URL).defaultReplyHeaders(nockReplyHeaders).options('/api/user').reply(200);
        nock(BACKEND_URL).defaultReplyHeaders(nockReplyHeaders).get('/api/user').reply(200, RootUserJson);
    });

    afterEach(() => {
        // tutaj resetuje mocki
        nock.cleanAll();
        nock.restore();
    });

    it('loads first contacts list', async () => {
        // tutaj prawidłowo mocki zwracają listę kontaktów
        nock(BACKEND_URL)
            .defaultReplyHeaders(nockReplyHeaders)
            .options(`/api/friendship/friends/${RootUserJson.id}?page=1`)
            .reply(200);
        nock(BACKEND_URL)
            .defaultReplyHeaders(nockReplyHeaders)
            .get(`/api/friendship/friends/${RootUserJson.id}?page=1`)
            .reply(200, ContactsFirstPageJson);

        render(
            <Provider store={store}>
                <Contacts />,
            </Provider>,
        );

        // expecty...
    });

    it('loads empty list and show empty component', async () => {
        // te mocki dalej zwracają listę kontaktów zamiast pustej listy
        nock(BACKEND_URL)
            .defaultReplyHeaders(nockReplyHeaders)
            .options(`/api/friendship/friends/${RootUserJson.id}?page=1`)
            .reply(200);
        nock(BACKEND_URL)
            .defaultReplyHeaders(nockReplyHeaders)
            .get(`/api/friendship/friends/${RootUserJson.id}?page=1`)
            .reply(200, EmptyJson);

        render(
            <Provider store={store}>
                <Contacts />
            </Provider>,
        );

        const emptyComponent = await screen.findByText('No contacts, add some friends');
        expect(emptyComponent).toBeInTheDocument();
    });
});

Proszę o pomoc.

Answer 1

Sądząc po kolejności wykonywania callbacków w Jest, żeby funkcja czyszcząca wykonała się po każdym teście umieszczonym wewnątrz describe, to trzeba ją przenieść poza describe.

Czyli:

afterEach(() => {
    // tutaj resetuje mocki
    nock.cleanAll();
    nock.restore();
});

describe('Contacts component', () => {
    beforeEach(() => {
        // ...
    });
 
    it('loads first contacts list', async () => {
        // ...
    });
 
    it('loads empty list and show empty component', async () => {
        // ...
    });
});

 

Comments

Przeniosłem funkcję afterEach nad funkcje describe i dalej ten sam efekt.

---

A jak wstawisz console.log do callbacka wewnątrz afterEach, to czy on się uruchomi po każdym it (tam też wstaw console.log, żeby widzieć co się kiedy wykonuje)?

---

Rozwiązałem problem, leżał on w zupełnie innym miejscu. W komponencie do fetchowania danych używałem hooku useSWR, który w testowaniu wymaga resetowania pamięci.