MSW with Playwright, GraphQL and Remix SSR

[pedro-novo-fanduel]

I'm currently facing a problem with integration testing that I need some help with.

My goal is to mock SSR requests on a per-test suite basis while still allowing the tests to run in parallel. I came across an approach that aligns with this discussion, but I've run into some challenges that I haven't been able to overcome yet.

So I basically have an api.mock.ts middleware that allows me to access the server instance in order to mock the requests on the demand.

export async function action({ request }: ActionFunctionArgs) {
  const req = await request.json();

  const { data, queryName, action } = req;

  if (action === 'clear') {
    server.resetHandlers();
    return req;
  }

  server.use(
    graphql.query(queryName, async () => {
      return HttpResponse.json({
        data
      });
    }),
  );

  return req;
}

And the way I interact with goes as follows (ignore the data structure, I'm just trying things out):

 await page.request.post('/api/mock', {
      data: {
          queryName: 'GameRules',
          data: {...},
      },
 });

In a test setup, it would be something like:

test.describe('Game Entry Page', () => {
  let page: Page;
  let homePage: HomePage;
  let gameEntryPage: GameEntryPage;

  test.beforeAll(async ({ browser }) => {
    page = await browser.newPage();

    homePage = new HomePage(page);
    gameEntryPage = new GameEntryPage(page, true);
  });

  test.describe('User selects nothing', () => {
    test.beforeAll(async () => {
      await page.request.post('/api/mock', {
        data: {
          queryName: 'GameRules',
          data: {},
        },
      });
      await homePage.goToHome();
      await homePage.goToGame();
    });

    test.afterAll(async () => {
      await page.request.post('/api/mock', {
        data: {
          action: 'clear',
        },
      });
    });

    test('Nothing is selected', async () => {
      // ...
    });
  });

  test.describe('User selects 1st item', () => {
    test.beforeAll(async () => {
      await page.request.post('/api/mock', {
        data: {
          queryName: 'GameRules',
          data: {},
        },
      });
      await homePage.goToHome();
      await homePage.goToGame();
      await gameEntryPage.selectItem('1');
    });

    test.afterAll(async () => {
      await page.request.post('/api/mock', {
        data: {
          action: 'clear',
        },
      });
    });

    test('1 is selected', async () => {
      // ...
    });
  });
});

The problem I'm having is that the 1st and 2nd nested test suite - test.describe - are mocking the same query queryName: 'GameRules' but with different responses, and since tests are running in parallel, I get the same response for both tests.
This, I believe, must be related to the fact that both handlers are being registered with the same name, but MSW is not able to know which one to serve, since there's no specificity besides the name, so it serves the last one registered (I might be wrong here).
Running tests sequentially could solve this, but it would significantly slow down our pipeline, so it's not really an option we're considering.

[pedro-areal-torres]

Very interesting. Also curious for a solution here.