javascript - Mock Service WorkerNode isn't working and I can't see why - Stack Overflow

admin管理员组

文章数量:1290273

If anyone can spot whatever's wrong with this code, I'd really appreciate. Not seeing an issue myself, but it's failing.

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

If anyone can spot whatever's wrong with this code, I'd really appreciate. Not seeing an issue myself, but it's failing.

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

• javascript
• reactjs
• typescript
• api

Share Improve this question Follow asked Aug 20, 2020 at 17:43 Erik CraigoErik Craigo 45122 gold badges44 silver badges66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I also had this problem. After a while I realized the cause. In my src/setupTests.js file I had:

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

So, fetch() was not being called at all.

I made 3 changes to the posted code to get it to work:

1. Import and call disableFetchMocks().
2. Add await before fetch(....
3. Change the URL to http://localhost/test, to address a test error that said I needed to use an absolute URL.

Here is the working code (cleaned up to AirB&B style by 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();
  });
});

When you run your tests these run in a node environment, in this fetch function does not exist (it means: global.fetch) for that reason you need to make a polyfill.

I remend installing the npm package 'whatwg-fetch'

npm install whatwg-fetch

and use it like this:

import 'whatwg-fetch';

This video could help

本文标签： javascriptMock Service WorkerNode isn39t working and I can39t see whyStack Overflow