Per playwright documentation you can mock an API call

This works fine for me but I have two tests that have different mock responses in the same file.

submitMock = (response) => page.route(/submit/, (route) =>
    route.fulfill({
      status: status || 200,
      body: JSON.stringify(response),
    }),
  );

/// my test code
describe('fill form', () => {
  beforeEach(async () => {
    jest.resetAllMocks(); // doesn't clear mock requests
    await setupAppMocks(); // some basic mocks
    await page.goto(
      `${localhost}/?foo=bar`,
    );
  });

  afterAll(async () => {
    await browser.close();
  });

  it('should test scenario 1', async () => {
    expect.hasAssertions();

    const responseMock = { test: 'test' };
    await submitMock(responseMock); // first mock created here

    await fillForm();
    await clickSubmit();

    await page.waitForSelector('[class*="CongratulationsText"]');

    const sectionText = await page.$eval(
      '[class*="CongratulationsText"]',
      (e) => e.textContent,
    );

    expect(sectionText).toBe(
      `Congratulations, expecting message for scenario 1`,
    );
  });

  it('should test scenario 2', async () => {
    expect.hasAssertions();

    const responseMock = { test: 'test 2' };
    await submitMock(responseMock); // second mock created here

    await fillForm();
    await clickSubmit();

    await page.waitForSelector('[class*="CongratulationsText"]');

    const sectionText = await page.$eval(
      '[class*="CongratulationsText"]',
      (e) => e.textContent,
    );

    // fails because first mock is still active
    expect(sectionText).toBe(
      `Congratulations, expecting message for scenario 2`,
    );
  });
});

Is there a way to clear the previous mock?

What I've tried so far is basically adding another mock but it doesn't seem to override the previous one. I'm assuming that the issue is that the mocks for the same pattern can't be overridden, but I don't have an easy way to fix the issue.

Per playwright documentation you can mock an API call

This works fine for me but I have two tests that have different mock responses in the same file.

submitMock = (response) => page.route(/submit/, (route) =>
    route.fulfill({
      status: status || 200,
      body: JSON.stringify(response),
    }),
  );

/// my test code
describe('fill form', () => {
  beforeEach(async () => {
    jest.resetAllMocks(); // doesn't clear mock requests
    await setupAppMocks(); // some basic mocks
    await page.goto(
      `${localhost}/?foo=bar`,
    );
  });

  afterAll(async () => {
    await browser.close();
  });

  it('should test scenario 1', async () => {
    expect.hasAssertions();

    const responseMock = { test: 'test' };
    await submitMock(responseMock); // first mock created here

    await fillForm();
    await clickSubmit();

    await page.waitForSelector('[class*="CongratulationsText"]');

    const sectionText = await page.$eval(
      '[class*="CongratulationsText"]',
      (e) => e.textContent,
    );

    expect(sectionText).toBe(
      `Congratulations, expecting message for scenario 1`,
    );
  });

  it('should test scenario 2', async () => {
    expect.hasAssertions();

    const responseMock = { test: 'test 2' };
    await submitMock(responseMock); // second mock created here

    await fillForm();
    await clickSubmit();

    await page.waitForSelector('[class*="CongratulationsText"]');

    const sectionText = await page.$eval(
      '[class*="CongratulationsText"]',
      (e) => e.textContent,
    );

    // fails because first mock is still active
    expect(sectionText).toBe(
      `Congratulations, expecting message for scenario 2`,
    );
  });
});

Is there a way to clear the previous mock?

What I've tried so far is basically adding another mock but it doesn't seem to override the previous one. I'm assuming that the issue is that the mocks for the same pattern can't be overridden, but I don't have an easy way to fix the issue.

• javascript
• jestjs
• playwright

• You can unroute your routes. – hardkoded Commented Mar 1, 2021 at 20:31
• @hardkoded, could you explain how? – TomTomSamSam Commented Mar 1, 2021 at 20:32
• playwright.dev/docs/api/class-page#pageunrouteurl-handler found this I guess – TomTomSamSam Commented Mar 1, 2021 at 20:32
• Thanks @hardkoded for the suggestion, it worked – TomTomSamSam Commented Mar 1, 2021 at 20:38

1 Answer 1

The way to unmock an API call is to use page.unroute Documentation here

page.unroute(/submit/);