diff --git a/test/integration/css-fixtures/global-and-module-ordering/pages/index.js b/test/integration/css-fixtures/global-and-module-ordering/pages/index.js
index 48ba07e8345f3b..a99bb6b71a55ff 100644
--- a/test/integration/css-fixtures/global-and-module-ordering/pages/index.js
+++ b/test/integration/css-fixtures/global-and-module-ordering/pages/index.js
@@ -3,11 +3,16 @@ import styles2 from './index2.module.css'
 
 export default function Home() {
   return (
-    <div
-      id="blueText"
-      className={`${styles1.textModule} ${styles2.textModule} textGlobal`}
-    >
-      This text should be blue.
-    </div>
+    <>
+      <div id="yellowText" className={`${styles1.textModule} textGlobal`}>
+        This text should be yellow.
+      </div>
+      <div
+        id="blueText"
+        className={`${styles1.textModule} ${styles2.textModule} textGlobal`}
+      >
+        This text should be blue.
+      </div>
+    </>
   )
 }
diff --git a/test/integration/css/test/index.test.js b/test/integration/css/test/index.test.js
index 3c53441bf3bcdb..3a5d257604c80b 100644
--- a/test/integration/css/test/index.test.js
+++ b/test/integration/css/test/index.test.js
@@ -848,24 +848,32 @@ describe('CSS Support', () => {
       try {
         browser = await webdriver(appPort, '/')
 
-        const currentColor = await browser.eval(
+        const blueColor = await browser.eval(
           `window.getComputedStyle(document.querySelector('#blueText')).color`
         )
-        expect(currentColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`)
+        expect(blueColor).toMatchInlineSnapshot(`"rgb(0, 0, 255)"`)
+
+        const yellowColor = await browser.eval(
+          `window.getComputedStyle(document.querySelector('#yellowText')).color`
+        )
+        expect(yellowColor).toMatchInlineSnapshot(`"rgb(255, 255, 0)"`)
 
         const cssFile = new File(join(appDir, 'pages/index.module.css'))
         try {
-          cssFile.replace('color: blue;', 'color: blue; ')
+          cssFile.replace('color: yellow;', 'color: rgb(1, 1, 1);')
+          await check(
+            () =>
+              browser.eval(
+                `window.getComputedStyle(document.querySelector('#yellowText')).color`
+              ),
+            'rgb(1, 1, 1)'
+          )
           await check(
             () =>
               browser.eval(
                 `window.getComputedStyle(document.querySelector('#blueText')).color`
               ),
-            {
-              test(content) {
-                return content === 'rgb(0, 0, 255)'
-              },
-            }
+            'rgb(0, 0, 255)'
           )
         } finally {
           cssFile.restore()
diff --git a/test/lib/next-test-utils.js b/test/lib/next-test-utils.js
index 81604c0bd5c1ff..678dfbe3c7e08f 100644
--- a/test/lib/next-test-utils.js
+++ b/test/lib/next-test-utils.js
@@ -1,18 +1,17 @@
-import fetch from 'node-fetch'
-import qs from 'querystring'
-import http from 'http'
+import spawn from 'cross-spawn'
 import express from 'express'
-import path from 'path'
+import { existsSync, readFileSync, unlinkSync, writeFileSync } from 'fs'
 import getPort from 'get-port'
-import spawn from 'cross-spawn'
-import { readFileSync, writeFileSync, existsSync, unlinkSync } from 'fs'
-import treeKill from 'tree-kill'
-
+import http from 'http'
 // `next` here is the symlink in `test/node_modules/next` which points to the root directory.
 // This is done so that requiring from `next` works.
 // The reason we don't import the relative path `../../dist/<etc>` is that it would lead to inconsistent module singletons
 import server from 'next/dist/server/next'
 import _pkg from 'next/package.json'
+import fetch from 'node-fetch'
+import path from 'path'
+import qs from 'querystring'
+import treeKill from 'tree-kill'
 
 export const nextServer = server
 export const pkg = _pkg
@@ -356,7 +355,11 @@ export async function check(contentFn, regex, hardError = true) {
   for (let tries = 0; tries < 30; tries++) {
     try {
       content = await contentFn()
-      if (regex.test(content)) {
+      if (typeof regex === 'string') {
+        if (regex === content) {
+          return true
+        }
+      } else if (regex.test(content)) {
         // found the content
         return true
       }
@@ -390,6 +393,24 @@ export class File {
   }
 
   replace(pattern, newValue) {
+    if (pattern instanceof RegExp) {
+      if (!pattern.test(this.originalContent)) {
+        throw new Error(
+          `Failed to replace content.\n\nPattern: ${pattern.toString()}\n\nContent: ${
+            this.originalContent
+          }`
+        )
+      }
+    } else if (typeof pattern === 'string') {
+      if (!this.originalContent.includes(pattern)) {
+        throw new Error(
+          `Failed to replace content.\n\nPattern: ${pattern}\n\nContent: ${this.originalContent}`
+        )
+      }
+    } else {
+      throw new Error(`Unknown replacement attempt type: ${pattern}`)
+    }
+
     const newContent = this.originalContent.replace(pattern, newValue)
     this.write(newContent)
   }