reporter: escape ANSI escape codes in diffs

Fix: #962

src/reporter/src/diff.tsx

@@ -84,14 +84,17 @@ export const Diff: FC<{ diff: string }> = ({ diff = '' }) => {
 
   let width = 0
   const maxLen = Math.max(columns - 5, 0)
-  const lines = sd.split('\n').filter(line => {
-    if (stringLength(line) > width) {
-      width = Math.min(maxLen, stringLength(line))
-    }
-    return (
-      line !== '\\ No newline at end of file' && !/^\=+$/.test(line)
-    )
-  })
+  const lines = sd
+    .replace(/\x1b/g, '\\' + 'x1b')
+    .split('\n')
+    .filter(line => {
+      if (line.length > width) {
+        width = Math.min(maxLen, line.length)
+      }
+      return (
+        line !== '\\ No newline at end of file' && !/^\=+$/.test(line)
+      )
+    })
   return (
     <Box flexDirection="column">
       {lines

src/reporter/tap-snapshots/test/diff.tsx.test.cjs

@@ -5,6 +5,17 @@
  * Make sure to inspect the output below.  Do not ignore changes!
  */
 'use strict'
+exports[`test/diff.tsx > TAP > ansi escape codes > must match snapshot 1`] = `
+--- expected                                                       
++++ actual                                                         
+@@ -1,3 +1,3 @@                                                    
+-Error: Oh \\x1b[1mdeary \\x1b[2mdeary \\x1b[0mdear. {                
+-  "cause": "foo",                                                 
++Error: Oh deary deary dear. {                                     
++  "cause": "bar",                                                 
+ }                                                                 
+`
+
 exports[`test/diff.tsx > TAP > diff some stuff > must match snapshot 1`] = `
 --- expected                                                       
 +++ actual                                                         

src/reporter/test/diff.tsx

@@ -1,9 +1,10 @@
-import './fixtures/chalk.js'
 import { createTwoFilesPatch } from 'diff'
 import { render } from 'ink-testing-library'
 import React from 'react'
 import t from 'tap'
+import { format } from 'tcompare'
 import { Diff } from '../dist/esm/diff.js'
+import './fixtures/chalk.js'
 
 t.test('diff some stuff', async t => {
   const found = {
@@ -119,3 +120,25 @@ I am a sojourner in civilized life again.`
   )
   t.matchSnapshot(app.lastFrame())
 })
+
+t.test('ansi escape codes', async t => {
+  const expected = new Error(
+    `Oh \x1b[1mdeary \x1b[2mdeary \x1b[0mdear.`,
+    {
+      cause: 'foo',
+    }
+  )
+  const actual = new Error(`Oh deary deary dear.`, { cause: 'bar' })
+
+  const app = render(
+    <Diff
+      diff={createTwoFilesPatch(
+        'expected',
+        'actual',
+        format(expected),
+        format(actual)
+      )}
+    />
+  )
+  t.matchSnapshot(app.lastFrame())
+})