add tests for matchers

Author: phryneas

src/__testHelpers__/getCleanedErrorMessage.ts

@@ -0,0 +1,16 @@
+// eslint-disable-next-line no-control-regex
+const consoleColors = /\x1b\[\d+m/g
+
+export function getExpectErrorMessage(
+  expectPromise: Promise<unknown>,
+): Promise<string> {
+  return expectPromise.then(
+    () => {
+      throw new Error('Expected promise to fail, but did not.')
+    },
+    e => {
+      const error = e as Error
+      return error.message.replace(consoleColors, '')
+    },
+  )
+}

…/renderStream/__testHelpers__/useShim.js src/__testHelpers__/useShim.jssrc/renderStream/__testHelpers__/useShim.js renamed to src/__testHelpers__/useShim.js src/renderStream/__testHelpers__/useShim.js renamed to src/__testHelpers__/useShim.js

@@ -8,6 +8,7 @@ import {
   toRenderExactlyTimes,
   toRerender,
 } from '../renderStreamMatchers.js'
+import {getExpectErrorMessage} from '../../__testHelpers__/getCleanedErrorMessage.js'
 
 expect.extend({
   toRerender,
@@ -56,6 +57,39 @@ describe('toRerender', () => {
 
     await expect(takeRender).not.toRerender()
   })
+
+  test("errors when it rerenders, but shouldn't", async () => {
+    const {takeRender, render} = createRenderStream({})
+
+    render(<RerenderingComponent />)
+    await expect(takeRender).toRerender()
+    await takeRender()
+
+    testEvents.emit('rerender')
+    const error = await getExpectErrorMessage(
+      expect(takeRender).not.toRerender(),
+    )
+    expect(error).toMatchInlineSnapshot(`
+expect(received).not.toRerender(expected)
+
+Expected component to not rerender, but it did.
+`)
+  })
+
+  test("errors when it should rerender, but doesn't", async () => {
+    const {takeRender, render} = createRenderStream({})
+
+    render(<RerenderingComponent />)
+    await expect(takeRender).toRerender()
+    await takeRender()
+
+    const error = await getExpectErrorMessage(expect(takeRender).toRerender())
+    expect(error).toMatchInlineSnapshot(`
+expect(received).toRerender(expected)
+
+Expected component to rerender, but it did not.
+`)
+  })
 })
 
 describe('toRenderExactlyTimes', () => {
@@ -67,4 +101,38 @@ describe('toRenderExactlyTimes', () => {
 
     await expect(takeRender).toRenderExactlyTimes(2)
   })
+
+  test('errors when the count of rerenders is wrong', async () => {
+    const {takeRender, render} = createRenderStream({})
+
+    render(<RerenderingComponent />)
+    testEvents.emit('rerender')
+
+    const error = await getExpectErrorMessage(
+      expect(takeRender).toRenderExactlyTimes(3),
+    )
+    expect(error).toMatchInlineSnapshot(`
+expect(received).toRenderExactlyTimes(expected)
+
+Expected component to render exactly 3 times.
+It rendered 2 times.
+`)
+  })
+
+  test('errors when the count of rerenders is right (inverted)', async () => {
+    const {takeRender, render} = createRenderStream({})
+
+    render(<RerenderingComponent />)
+    testEvents.emit('rerender')
+
+    const error = await getExpectErrorMessage(
+      expect(takeRender).not.toRenderExactlyTimes(2),
+    )
+    expect(error).toMatchInlineSnapshot(`
+expect(received).not.toRenderExactlyTimes(expected)
+
+Expected component to not render exactly 2 times.
+It rendered 2 times.
+`)
+  })
 })

src/jest/__tests__/renderStreamMatchers.test.tsx

@@ -28,7 +28,9 @@ export const toRerender: MatcherFunction<[options?: NextRenderOptions]> =
     const _stream = actual as RenderStream<any> | Assertable
     const stream =
       assertableSymbol in _stream ? _stream[assertableSymbol] : _stream
-    const hint = this.utils.matcherHint('toRerender')
+    const hint = this.utils.matcherHint('toRerender', undefined, undefined, {
+      isNot: this.isNot,
+    })
     let pass = true
     try {
       await stream.peekRender({timeout: 100, ...options})
@@ -66,7 +68,12 @@ export const toRenderExactlyTimes: MatcherFunction<
   const stream =
     assertableSymbol in _stream ? _stream[assertableSymbol] : _stream
   const options = {timeout: 100, ...optionsPerRender}
-  const hint = this.utils.matcherHint('toRenderExactlyTimes')
+  const hint = this.utils.matcherHint(
+    'toRenderExactlyTimes',
+    undefined,
+    undefined,
+    {isNot: this.isNot},
+  )
   let pass = true
   try {
     if (stream.totalRenderCount() > times) {
@@ -102,8 +109,8 @@ export const toRenderExactlyTimes: MatcherFunction<
       return (
         `${
           hint
-        } Expected component to${pass ? ' not' : ''} render exactly ${times}.` +
-        ` It rendered ${stream.totalRenderCount()} times.`
+        }\n\nExpected component to${pass ? ' not' : ''} render exactly ${times} times.` +
+        `\nIt rendered ${stream.totalRenderCount()} times.`
       )
     },
   }

src/jest/renderStreamMatchers.ts

@@ -4,6 +4,7 @@ import {createRenderStream} from '@testing-library/react-render-stream'
 import {userEvent} from '@testing-library/user-event'
 import * as React from 'react'
 import {ErrorBoundary} from 'react-error-boundary'
+import {getExpectErrorMessage} from '../../__testHelpers__/getCleanedErrorMessage.js'
 
 function CounterForm({
   value,
@@ -230,14 +231,9 @@ describe('onRender', () => {
     await userEvent.click(incrementButton)
     await userEvent.click(incrementButton)
     await takeRender()
-    const error = await takeRender()
-      .then(() => undefined as never)
-      .catch(e => e as Error)
+    const error = await getExpectErrorMessage(takeRender())
 
-    // eslint-disable-next-line no-control-regex
-    const consoleColors = /\x1b\[\d+m/g
-
-    expect(error.message.replace(consoleColors, '')).toMatchInlineSnapshot(`
+    expect(error).toMatchInlineSnapshot(`
 expect(received).toBe(expected) // Object.is equality
 
 Expected: 1