Experimental MirageJS interceptor for Playwright.
Example usage:
// server.js
import { PlaywrightInterceptor } from "mirage-playwright";
import { createServer } from "miragejs";
export function makeServer({ environment = "test", page }: MakeServerArgs) {
const server = createServer({
interceptor: new PlaywrightInterceptor(),
// We just intercept requests to `/api`, meaning at this time we don't need to configure passthroughs.
// Not configuring this spams the Playwright Actions tab with a lot of noise. Unsure if there is a good workaround.
interceptUrlPattern: "/api/**",
page,
// ... other Mirage configuration
});
return server;
};
// test-helper.js
import { test as testBase, expect } from "@playwright/test";
import { makeServer } from "./server";
const test = testBase.extend({
mirageServer: async ({page}, use) => {
const mirageServer = makeServer({
environment: "test",
page,
});
await use(mirageServer);
// TODO: shutdown is not automatically called due to: https://github.com/miragejs/miragejs/blob/34266bf7ebd200bbb1fade0ce7a7a9760cc93a88/lib/server.js#L664
mirageServer.interceptor.shutdown();
mirageServer.shutdown();
},
});
// my-test.js
import { test, expect } from "./test-helper";
test.describe('my example test module', () => {
test("my example test", async ({ page, mirageServer }) => {
mirageServer.create("my-mirage-model", {
name: "Foo",
});
await page.goto('/');
});
});