MSW randomly fails to mock GET request while running tests with karma / jasmine

[DennisOosterling]

Environment

Name	Version
msw	0.33.3
browser	Chrome 92.0.4515.107
OS	Mac OS 11.4
Node	14.17.3
npm	7.20.5

Request handlers

handlers.ts

import { rest } from 'msw';
import { units } from './data/units';

const baseUrl = 'http://api.mock';

export const handlers = [
    rest.get(`${baseUrl}/fakerequest`, (req, res, ctx) => {
        return res(
            ctx.status(200),
            ctx.json(units.multiple())
        );
    })
];

browser.ts

import { setupWorker } from 'msw';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

test.ts

// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
import {worker} from "./mocks/browser";

worker.start();

declare const require: {
  context(path: string, deep?: boolean, filter?: RegExp): {
    keys(): string[];
    <T>(id: string): T;
  };
};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

Actual request

fake-service.service.spec.ts

import { TestBed } from '@angular/core/testing';

import { FakeServiceService } from './fake-service.service';
import { HttpClientModule } from '@angular/common/http';
import { doesNotReject } from 'assert';

describe('FakeServiceService', () => {
  let service: FakeServiceService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientModule]
    });
    service = TestBed.inject(FakeServiceService);
  });

  it('Should get a response', done => {
    service.fakeCall().subscribe(
      data => {
        expect(data.length).toBeGreaterThan(0);
        done();
      }
    );
  });
});

fake-service.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class FakeServiceService {
  constructor(private httpClient: HttpClient) {}

  public fakeCall = (): Observable<any> => {
    return this.httpClient.get<any>('http://api.mock/fakerequest');
  };
}

Current behavior

Currently, while running tests with karma in a fresh angular project, the tests will randomly fail with a message coming from msw that it Failed to mock GET request as shown in the screenshots below. I haven't found a way to reproduce this problem as it really seems to happen randomly (sometimes within 5 min, sometimes 10-15min of retrying). This happens both locally as in the CI.

Example repo can be found here

Expected behavior

msw will be able to mock the request

Screenshots

[kettanaito]

Hey, @DennisOosterling.

Please update to 0.34.0 and update the worker script in your public directory. We've improved the error message, and "Failed to mock" is not as ambiguous as before. In reality, error messages like this meant an error in your code (with how the request was made or what kind of response was received). They were rarely related to MSW. It was a misleading error message that led our users to believe it was MSW failing to mock something when it was only propagating an exception from the request/response.

Please, could you put this into a reproduction repository for me to look at? I'm happy to look into this, but I don't have the capacity to set up example repositories. I hope for your understanding.

[DennisOosterling]

Hi @kettanaito reproduction repository was mentioned under the header Current behavior, but here is the link again: https://github.com/DennisOosterling/msw-repro

Thank you for the 0.34.0 update, I'll test again with this version, update the repo, and get back when I know more.

[kettanaito]

I'm sorry for overlooking this, @DennisOosterling 🤦🏻. Thank you for preparing the repo!

[DennisOosterling]

See screenshot below for the output after updating to 0.34.0

It seems like the request is 'passed through' to the internet instead of the handlers?
I also tried to start the worker in the test and await it, but still the same issue occurs (See code below).

The repo is updated with msw 0.34.0. Would appreciate it if you could take a look, or give some additonal pointers on how to debug this issue 😄.

fake-service.service.spec.ts

import { TestBed } from '@angular/core/testing';

import { FakeServiceService } from './fake-service.service';
import { HttpClientModule } from '@angular/common/http';
import { doesNotReject } from 'assert';
import { worker } from 'src/mocks/browser';

describe('FakeServiceService', () => {
  let service: FakeServiceService;

  beforeAll(async () => {
    await worker.start();
  })
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientModule]
    });
    service = TestBed.inject(FakeServiceService);
  });

  it('Should get a response', done => {
    service.fakeCall().subscribe(
      data => {
        expect(data.length).toBeGreaterThan(0);
        done();
      }
    );
  });
});

[KamalAman]

In my case, I though I was running into this issue. However what it turned to be was that the mockServiceWorker.js static dependency was not being properly loaded into the environment and worker.start would never finish resolving because it got a 404 error when loading.

[whatthewhat]

I'm fairly certain I'm having this issue with testem + Chrome 96 (headless) and msw 0.35.0. Has anyone been able to solve this without adding timeouts as suggested in mswjs/examples#56?

@kettanaito is there any debugging I could help with to better understand the issue?

As mentioned here and in the other issue this happens randomly and only in the first test that uses msw.

Update: forgot to include the test code!

import { rest, setupWorker } from 'msw';
import { module, test } from 'qunit';

module('Acceptance | REST', function () {
  test('mocking a REST API', async function (assert) {
    let worker = setupWorker();
    await worker.start({
      onUnhandledRequest: 'error',
    });

    worker.use(
      rest.get('/people', (req, res, ctx) => {
        return res(
          ctx.status(200),
          ctx.json({
            people: [
              {
                name: 'Jane Doe',
                email: '[email protected]',
              },
            ],
          })
        );
      })
    );

    // Test always passes if this is uncommented:
    // await new Promise((resolve) => setTimeout(resolve, 50));

    let response = await fetch('/people');

    assert.equal(response.status, 200);

    worker.resetHandlers();
  });
});

Update 2: No failures when using headless Firefox instead of Chrome.

[kettanaito]

An update on this: we've recently solved an issue where the worker.start() Promise could resolve prematurely. This is published in 0.39.1 now and I urge you to update to that version, tests in Karma should pass reliably then.

If they still don't, please attach a reproduction repository for me to look at. Thanks.