diff --git a/test/e2e/__snapshots__/mime-types.test.js.snap.webpack4 b/test/e2e/__snapshots__/mime-types.test.js.snap.webpack4
new file mode 100644
index 0000000000..b513a0568f
--- /dev/null
+++ b/test/e2e/__snapshots__/mime-types.test.js.snap.webpack4
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mimeTypes option as an object with a custom type should request file with different js mime type: console messages 1`] = `Array []`;
+
+exports[`mimeTypes option as an object with a custom type should request file with different js mime type: page errors 1`] = `Array []`;
+
+exports[`mimeTypes option as an object with a custom type should request file with different js mime type: response headers content-type 1`] = `"text/html; charset=utf-8"`;
+
+exports[`mimeTypes option as an object with a custom type should request file with different js mime type: response status 1`] = `200`;
+
+exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: console messages 1`] = `Array []`;
+
+exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: page errors 1`] = `Array []`;
+
+exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: response headers content-type 1`] = `"text/plain; charset=utf-8"`;
+
+exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: response status 1`] = `200`;
diff --git a/test/e2e/__snapshots__/mime-types.test.js.snap.webpack5 b/test/e2e/__snapshots__/mime-types.test.js.snap.webpack5
new file mode 100644
index 0000000000..b513a0568f
--- /dev/null
+++ b/test/e2e/__snapshots__/mime-types.test.js.snap.webpack5
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mimeTypes option as an object with a custom type should request file with different js mime type: console messages 1`] = `Array []`;
+
+exports[`mimeTypes option as an object with a custom type should request file with different js mime type: page errors 1`] = `Array []`;
+
+exports[`mimeTypes option as an object with a custom type should request file with different js mime type: response headers content-type 1`] = `"text/html; charset=utf-8"`;
+
+exports[`mimeTypes option as an object with a custom type should request file with different js mime type: response status 1`] = `200`;
+
+exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: console messages 1`] = `Array []`;
+
+exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: page errors 1`] = `Array []`;
+
+exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: response headers content-type 1`] = `"text/plain; charset=utf-8"`;
+
+exports[`mimeTypes option as an object with a remapped type should request file with different js mime type: response status 1`] = `200`;
diff --git a/test/e2e/mime-types.test.js b/test/e2e/mime-types.test.js
new file mode 100644
index 0000000000..abc9f5a9e8
--- /dev/null
+++ b/test/e2e/mime-types.test.js
@@ -0,0 +1,135 @@
+"use strict";
+
+const webpack = require("webpack");
+const Server = require("../../lib/Server");
+const config = require("../fixtures/mime-types-config/webpack.config");
+const runBrowser = require("../helpers/run-browser");
+const port = require("../ports-map")["mime-types-option"];
+
+describe("mimeTypes option", () => {
+  describe("as an object with a remapped type", () => {
+    let compiler;
+    let server;
+    let page;
+    let browser;
+    let pageErrors;
+    let consoleMessages;
+
+    beforeEach(async () => {
+      compiler = webpack(config);
+
+      server = new Server(
+        {
+          devMiddleware: {
+            mimeTypes: {
+              js: "text/plain",
+            },
+          },
+          port,
+        },
+        compiler
+      );
+
+      await server.start();
+
+      ({ page, browser } = await runBrowser());
+
+      pageErrors = [];
+      consoleMessages = [];
+    });
+
+    afterEach(async () => {
+      await browser.close();
+      await server.stop();
+    });
+
+    it("should request file with different js mime type", async () => {
+      page
+        .on("console", (message) => {
+          consoleMessages.push(message);
+        })
+        .on("pageerror", (error) => {
+          pageErrors.push(error);
+        });
+
+      const response = await page.goto(`http://127.0.0.1:${port}/main.js`, {
+        waitUntil: "networkidle0",
+      });
+
+      expect(response.status()).toMatchSnapshot("response status");
+
+      expect(response.headers()["content-type"]).toMatchSnapshot(
+        "response headers content-type"
+      );
+
+      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+        "console messages"
+      );
+
+      expect(pageErrors).toMatchSnapshot("page errors");
+    });
+  });
+
+  describe("as an object with a custom type", () => {
+    let compiler;
+    let server;
+    let page;
+    let browser;
+    let pageErrors;
+    let consoleMessages;
+
+    beforeEach(async () => {
+      compiler = webpack(config);
+
+      server = new Server(
+        {
+          devMiddleware: {
+            mimeTypes: {
+              custom: "text/html",
+            },
+          },
+          port,
+        },
+        compiler
+      );
+
+      await server.start();
+
+      ({ page, browser } = await runBrowser());
+
+      pageErrors = [];
+      consoleMessages = [];
+    });
+
+    afterEach(async () => {
+      await browser.close();
+      await server.stop();
+    });
+
+    it("should request file with different js mime type", async () => {
+      page
+        .on("console", (message) => {
+          consoleMessages.push(message);
+        })
+        .on("pageerror", (error) => {
+          pageErrors.push(error);
+        });
+
+      const response = await page.goto(`http://127.0.0.1:${port}/file.custom`, {
+        waitUntil: "networkidle0",
+      });
+
+      expect(response.status()).toMatchSnapshot("response status");
+
+      expect(response.headers()["content-type"]).toMatchSnapshot(
+        "response headers content-type"
+      );
+
+      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+        "console messages"
+      );
+
+      expect(pageErrors).toMatchSnapshot("page errors");
+    });
+  });
+});
diff --git a/test/server/mimeTypes-option.test.js b/test/server/mimeTypes-option.test.js
deleted file mode 100644
index 131cae0aaa..0000000000
--- a/test/server/mimeTypes-option.test.js
+++ /dev/null
@@ -1,85 +0,0 @@
-"use strict";
-
-const webpack = require("webpack");
-const request = require("supertest");
-const Server = require("../../lib/Server");
-const config = require("../fixtures/mime-types-config/webpack.config");
-const port = require("../ports-map")["mime-types-option"];
-
-describe('"mimeTypes" option', () => {
-  describe("as an object with a remapped type", () => {
-    let server;
-    let req;
-
-    beforeAll(async () => {
-      const compiler = webpack(config);
-
-      server = new Server(
-        {
-          devMiddleware: {
-            mimeTypes: {
-              js: "application/octet-stream",
-            },
-          },
-          port,
-        },
-        compiler
-      );
-
-      await server.start();
-
-      req = request(server.app);
-    });
-
-    afterAll(async () => {
-      await server.stop();
-    });
-
-    it("requests file with different js mime type", async () => {
-      const response = await req.get("/main.js");
-
-      expect(response.status).toEqual(200);
-      expect(response.headers["content-type"]).toEqual(
-        "application/octet-stream"
-      );
-    });
-  });
-
-  describe("as an object with a custom type", () => {
-    let server;
-    let req;
-
-    beforeAll(async () => {
-      const compiler = webpack(config);
-
-      server = new Server(
-        {
-          devMiddleware: {
-            mimeTypes: {
-              custom: "text/html",
-            },
-          },
-          port,
-        },
-        compiler
-      );
-
-      await server.start();
-
-      req = request(server.app);
-    });
-
-    afterAll(async () => {
-      await server.stop();
-    });
-
-    it("requests file with custom mime type", async () => {
-      const response = await req.get("/file.custom");
-
-      expect(response.status).toEqual(200);
-      expect(response.headers["content-type"]).toEqual(
-        "text/html; charset=utf-8"
-      );
-    });
-  });
-});