javascript - Mock Service Worker/Node fungerar inte och jag kan inte se varför

Om någon kan upptäcka vad som är fel med den här koden, skulle jag verkligen uppskatta det. Jag ser inget problem själv, men den misslyckas.

import React from "react"
import {setupServer} from "msw/node"
import {rest} from "msw"

describe("mocking apis", () => {
  const testCall = jest.fn()
  const server = setupServer(
    ...[
      rest.get("/test", (req, res, ctx) => {
        console.log('This line is never run')
        testCall()
        return res(ctx.json({message: "success"}))
      }),
    ]
  )

  test("test", async () => {
    server.listen()
    fetch("/test", {method: "GET"})
    expect(testCall).toHaveBeenCalled()
    server.close();
  })
})

Svar #1

Jag hade också detta problem. Efter ett tag insåg jag orsaken. I min src/setupTests.js-fil hade jag:

import { enableFetchMocks } from 'jest-fetch-mock';
...
enableFetchMocks();

Så, fetch() kallades inte alls.

Jag gjorde 3 ändringar i den publicerade koden för att få den att fungera:

  1. Importera och kalla disableFetchMocks().
  2. Lägg till await före fetch(....
  3. Ändra URL:en till http://localhost/test, för att åtgärda ett testfel som sade att jag behövde använda en absolut URL.

Här är den fungerande koden (rensad upp till AirB&B-stil av PyCharm):

import { setupServer } from 'msw/node';
import { rest } from 'msw';
import { disableFetchMocks } from 'jest-fetch-mock';

describe('mocking apis', () => {
  const testCall = jest.fn();
  const server = setupServer(
    ...[
      rest.get('http://localhost/test', (req, res, ctx) => {
        console.log('This line is run');
        testCall();
        return res(ctx.json({ message: 'success' }));
      }),
    ],
  );

  test('test', async () => {
    disableFetchMocks();
    server.listen();
    await fetch('http://localhost/test', { method: 'GET' });
    expect(testCall).toHaveBeenCalled();
    server.close();
  });
});

Svar #2

När du kör dina tester körs dessa i en nodmiljö, i denna existerar inte fetch-funktionen (det betyder: global.fetch) av den anledningen behöver du skapa en polyfill.

Jag rekommenderar att installera npm-paketet 'whatwg-fetch'

npm install whatwg-fetch

och använd det så här:

import 'whatwg-fetch';

Den här videon kan hjälpa

Relaterade artiklar