diff --git a/packages/babel-code-frame/src/index.ts b/packages/babel-code-frame/src/index.ts
index 30653a64c7..9c237d423e 100644
--- a/packages/babel-code-frame/src/index.ts
+++ b/packages/babel-code-frame/src/index.ts
@@ -152,7 +152,7 @@ export function codeFrameColumns(
     .map((line, index) => {
       const number = start + 1 + index;
       const paddedNumber = ` ${number}`.slice(-numberMaxWidth);
-      const gutter = ` ${paddedNumber} | `;
+      const gutter = ` ${paddedNumber} |`;
       const hasMarker = markerLines[number];
       const lastMarkerLine = !markerLines[number + 1];
       if (hasMarker) {
@@ -166,6 +166,7 @@ export function codeFrameColumns(
           markerLine = [
             "\n ",
             maybeHighlight(defs.gutter, gutter.replace(/\d/g, " ")),
+            " ",
             markerSpacing,
             maybeHighlight(defs.marker, "^").repeat(numberOfMarkers),
           ].join("");
@@ -177,11 +178,13 @@ export function codeFrameColumns(
         return [
           maybeHighlight(defs.marker, ">"),
           maybeHighlight(defs.gutter, gutter),
-          line,
+          line.length > 0 ? ` ${line}` : "",
           markerLine,
         ].join("");
       } else {
-        return ` ${maybeHighlight(defs.gutter, gutter)}${line}`;
+        return ` ${maybeHighlight(defs.gutter, gutter)}${
+          line.length > 0 ? ` ${line}` : ""
+        }`;
       }
     })
     .join("\n");
diff --git a/packages/babel-code-frame/test/index.js b/packages/babel-code-frame/test/index.js
index a27ef7c83f..60fa5cdaa6 100644
--- a/packages/babel-code-frame/test/index.js
+++ b/packages/babel-code-frame/test/index.js
@@ -42,7 +42,7 @@ describe("@babel/code-frame", function () {
         "   6 |  * @returns Number",
         ">  7 |  */",
         "     |  ^",
-        "   8 | ",
+        "   8 |",
         "   9 | function sum(a, b) {",
         "  10 |   return a + b",
       ].join("\n"),
@@ -70,7 +70,7 @@ describe("@babel/code-frame", function () {
         "> 6 |  * @returns Number",
         "    |  ^",
         "  7 |  */",
-        "  8 | ",
+        "  8 |",
         "  9 | function sum(a, b) {",
       ].join("\n"),
     );
@@ -105,8 +105,8 @@ describe("@babel/code-frame", function () {
   test("opts.highlightCode with multiple columns and lines", function () {
     // prettier-ignore
     const rawLines = [
-      "function a(b, c) {", 
-      "  return b + c;", 
+      "function a(b, c) {",
+      "  return b + c;",
       "}"
     ].join("\n");
 
@@ -160,7 +160,7 @@ describe("@babel/code-frame", function () {
         "   6 |  * @returns Number",
         ">  7 |  */",
         "     |  ^",
-        "   8 | ",
+        "   8 |",
         "   9 | function sum(a, b) {",
         "  10 |   return a + b",
       ].join("\n"),
@@ -187,7 +187,7 @@ describe("@babel/code-frame", function () {
         "  6 |  * @returns Number",
         "> 7 |  */",
         "    |  ^",
-        "  8 | ",
+        "  8 |",
       ].join("\n"),
     );
   });
@@ -207,9 +207,7 @@ describe("@babel/code-frame", function () {
       "}",
     ].join("\n");
     expect(codeFrame(rawLines, 7, 2, { linesAbove: 1, linesBelow: 1 })).toEqual(
-      ["  6 |  * @returns Number", "> 7 |  */", "    |  ^", "  8 | "].join(
-        "\n",
-      ),
+      ["  6 |  * @returns Number", "> 7 |  */", "    |  ^", "  8 |"].join("\n"),
     );
   });
 
@@ -277,9 +275,9 @@ describe("@babel/code-frame", function () {
     ).toEqual(
       chalk.reset(
         [
-          " " + gutter(" 2 | "),
-          marker(">") + gutter(" 3 | "),
-          " " + gutter(" 4 | "),
+          " " + gutter(" 2 |"),
+          marker(">") + gutter(" 3 |"),
+          " " + gutter(" 4 |"),
         ].join("\n"),
       ),
     );
diff --git a/scripts/integration-tests/e2e-jest.sh b/scripts/integration-tests/e2e-jest.sh
index 4245a4b883..622b416e1c 100755
--- a/scripts/integration-tests/e2e-jest.sh
+++ b/scripts/integration-tests/e2e-jest.sh
@@ -42,6 +42,13 @@ yarn install
 yarn dedupe '@babel/*'
 yarn build
 
+# Workaround for https://github.com/babel/babel/pull/12567
+node -e '
+  let snapshots = fs.readFileSync("packages/jest-message-util/src/__tests__/__snapshots__/messages.test.ts.snap", "utf8");
+  snapshots = snapshots.replace(/(?<!^<dim>.*)\| <\/>/gm, "|<\/> ");
+  fs.writeFileSync("packages/jest-message-util/src/__tests__/__snapshots__/messages.test.ts.snap", snapshots);
+'
+
 # The full test suite takes about 20mins on CircleCI. We run only a few of them
 # to speed it up.
 # The goals of this e2e test are: