correctly handle console logs in tests (#1567)

Author: phryneas

packages/toolkit/jest.setup.js

@@ -14,3 +14,5 @@ process.on('unhandledRejection', (error) => {
   // eslint-disable-next-line no-undef
   fail(error)
 })
+
+process.env.NODE_ENV = 'development'

packages/toolkit/src/query/tests/fakeBaseQuery.test.tsx

@@ -1,5 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit'
 import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/query'
+import './helpers'
 
 type CustomErrorType = { type: 'Custom' }
 
@@ -122,8 +123,15 @@ const store = configureStore({
 
 test('fakeBaseQuery throws when invoking query', async () => {
   const thunk = api.endpoints.withQuery.initiate('')
-  const result = await store.dispatch(thunk)
-  expect(result.error).toEqual({
+  let result: { error?: any } | undefined
+  await expect(async () => {
+    result = await store.dispatch(thunk)
+  }).toHaveConsoleOutput(
+    `An unhandled error occured processing a request for the endpoint "withQuery".
+    In the case of an unhandled error, no tags will be "provided" or "invalidated". [Error: When using \`fakeBaseQuery\`, all queries & mutations must use the \`queryFn\` definition syntax.]`
+  )
+
+  expect(result!.error).toEqual({
     message:
       'When using `fakeBaseQuery`, all queries & mutations must use the `queryFn` definition syntax.',
     name: 'Error',

packages/toolkit/src/query/tests/fetchBaseQuery.test.tsx

@@ -765,11 +765,12 @@ describe('FormData', () => {
 
 describe('still throws on completely unexpected errors', () => {
   test('', async () => {
+    const error = new Error('some unexpected error')
     const req = baseQuery(
       {
         url: '/success',
         validateStatus() {
-          throw new Error('some unexpected error')
+          throw error
         },
       },
       {
@@ -781,8 +782,6 @@ describe('still throws on completely unexpected errors', () => {
       {}
     )
     expect(req).toBeInstanceOf(Promise)
-    await expect(req).rejects.toMatchInlineSnapshot(
-      `[Error: some unexpected error]`
-    )
+    await expect(req).rejects.toBe(error)
   })
 })

packages/toolkit/src/query/tests/helpers.tsx

@@ -12,6 +12,12 @@ import type { Reducer } from 'react'
 import React, { useCallback } from 'react'
 import { Provider } from 'react-redux'
 
+import {
+  mockConsole,
+  createConsole,
+  getLog,
+} from 'console-testing-library/pure'
+
 export const ANY = 0 as any
 
 export const DEFAULT_DELAY_MS = 150
@@ -106,6 +112,54 @@ expect.extend({
   },
 })
 
+declare global {
+  namespace jest {
+    interface Matchers<R> {
+      toHaveConsoleOutput(expectedOutput: string): Promise<R>
+    }
+  }
+}
+
+function normalize(str: string) {
+  return str
+    .normalize()
+    .replace(/\s*\r?\n\r?\s*/g, '')
+    .trim()
+}
+
+expect.extend({
+  async toHaveConsoleOutput(
+    fn: () => void | Promise<void>,
+    expectedOutput: string
+  ) {
+    const restore = mockConsole(createConsole())
+    await fn()
+    const log = getLog().log
+    restore()
+
+    if (normalize(log) === normalize(expectedOutput))
+      return {
+        message: () => `Console output matches 
+===
+${expectedOutput}
+===`,
+        pass: true,
+      }
+    else
+      return {
+        message: () => `Console output 
+===
+${log}
+=== 
+does not match 
+===
+${expectedOutput}
+===`,
+        pass: false,
+      }
+  },
+})
+
 export const actionsReducer = {
   actions: (state: AnyAction[] = [], action: AnyAction) => {
     return [...state, action]

packages/toolkit/src/query/tests/optimisticUpdates.test.tsx

@@ -15,7 +15,9 @@ const api = createApi({
   baseQuery: (...args: any[]) => {
     const result = baseQuery(...args)
     if ('then' in result)
-      return result.then((data: any) => ({ data, meta: 'meta' }))
+      return result
+        .then((data: any) => ({ data, meta: 'meta' }))
+        .catch((e: any) => ({ error: e }))
     return { data: result, meta: 'meta' }
   },
   tagTypes: ['Post'],
@@ -38,7 +40,7 @@ const api = createApi({
         )
         queryFulfilled.catch(undo)
       },
-      invalidatesTags: ['Post'],
+      invalidatesTags: (result) => (result ? ['Post'] : []),
     }),
   }),
 })
@@ -119,8 +121,9 @@ describe('basic lifecycle', () => {
     expect(onSuccess).not.toHaveBeenCalled()
     await act(() => waitMs(5))
     expect(onError).toHaveBeenCalledWith({
-      error: { message: 'error' },
-      isUnhandledError: true,
+      error: 'error',
+      isUnhandledError: false,
+      meta: undefined,
     })
     expect(onSuccess).not.toHaveBeenCalled()
   })

packages/toolkit/src/query/tests/queryFn.test.tsx

@@ -1,9 +1,11 @@
+import type { SerializedError } from '@reduxjs/toolkit'
 import { configureStore } from '@reduxjs/toolkit'
 import type { BaseQueryFn, FetchBaseQueryError } from '@reduxjs/toolkit/query'
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
 import type { Post } from './mocks/server'
 import { posts } from './mocks/server'
 import { actionsReducer, setupApiStore } from './helpers'
+import type { QuerySubState } from '@reduxjs/toolkit/dist/query/core/apiState'
 
 describe('queryFn base implementation tests', () => {
   const baseQuery: BaseQueryFn<string, { wrappedByBaseQuery: string }, string> =
@@ -172,7 +174,15 @@ describe('queryFn base implementation tests', () => {
     ['withAsyncThrowingQueryFn', withAsyncThrowingQueryFn, 'throw'],
   ])('%s1', async (endpointName, endpoint, expectedResult) => {
     const thunk = endpoint.initiate(endpointName)
-    const result = await store.dispatch(thunk)
+    let result: undefined | QuerySubState<any> = undefined
+    await expect(async () => {
+      result = await store.dispatch(thunk)
+    }).toHaveConsoleOutput(
+      endpointName.includes('Throw')
+        ? `An unhandled error occured processing a request for the endpoint "${endpointName}".
+        In the case of an unhandled error, no tags will be "provided" or "invalidated". [Error: resultFrom(${endpointName})]`
+        : ''
+    )
     if (expectedResult === 'data') {
       expect(result).toEqual(
         expect.objectContaining({
@@ -209,7 +219,19 @@ describe('queryFn base implementation tests', () => {
     ],
   ])('%s', async (endpointName, endpoint, expectedResult) => {
     const thunk = endpoint.initiate(endpointName)
-    const result = await store.dispatch(thunk)
+    let result:
+      | undefined
+      | { data: string }
+      | { error: string | SerializedError } = undefined
+    await expect(async () => {
+      result = await store.dispatch(thunk)
+    }).toHaveConsoleOutput(
+      endpointName.includes('Throw')
+        ? `An unhandled error occured processing a request for the endpoint "${endpointName}".
+        In the case of an unhandled error, no tags will be "provided" or "invalidated". [Error: resultFrom(${endpointName})]`
+        : ''
+    )
+
     if (expectedResult === 'data') {
       expect(result).toEqual(
         expect.objectContaining({
@@ -236,17 +258,32 @@ describe('queryFn base implementation tests', () => {
   test('neither provided', async () => {
     {
       const thunk = withNeither.initiate('withNeither')
-      const result = await store.dispatch(thunk)
-      expect(result.error).toEqual(
+      let result: QuerySubState<any>
+      await expect(async () => {
+        result = await store.dispatch(thunk)
+      }).toHaveConsoleOutput(
+        `An unhandled error occured processing a request for the endpoint "withNeither".
+        In the case of an unhandled error, no tags will be "provided" or "invalidated". [TypeError: endpointDefinition.queryFn is not a function]`
+      )
+      expect(result!.error).toEqual(
         expect.objectContaining({
           message: 'endpointDefinition.queryFn is not a function',
         })
       )
     }
     {
+      let result:
+        | undefined
+        | { data: string }
+        | { error: string | SerializedError } = undefined
       const thunk = mutationWithNeither.initiate('mutationWithNeither')
-      const result = await store.dispatch(thunk)
-      expect('error' in result && result.error).toEqual(
+      await expect(async () => {
+        result = await store.dispatch(thunk)
+      }).toHaveConsoleOutput(
+        `An unhandled error occured processing a request for the endpoint "mutationWithNeither".
+        In the case of an unhandled error, no tags will be "provided" or "invalidated". [TypeError: endpointDefinition.queryFn is not a function]`
+      )
+      expect((result as any).error).toEqual(
         expect.objectContaining({
           message: 'endpointDefinition.queryFn is not a function',
         })
@@ -336,11 +373,17 @@ describe('usage scenario tests', () => {
   })
 
   it('can wrap a service like Firebase and handle errors', async () => {
-    const result = await storeRef.store.dispatch(
-      api.endpoints.getMissingFirebaseUser.initiate(1)
-    )
-    expect(result.data).toBeUndefined()
-    expect(result.error).toEqual(
+    let result: QuerySubState<any>
+    await expect(async () => {
+      result = await storeRef.store.dispatch(
+        api.endpoints.getMissingFirebaseUser.initiate(1)
+      )
+    })
+      .toHaveConsoleOutput(`An unhandled error occured processing a request for the endpoint "getMissingFirebaseUser".
+    In the case of an unhandled error, no tags will be "provided" or "invalidated". [Error: Missing user]`)
+
+    expect(result!.data).toBeUndefined()
+    expect(result!.error).toEqual(
       expect.objectContaining({
         message: 'Missing user',
         name: 'Error',

packages/toolkit/src/query/tests/retry.test.ts

@@ -21,7 +21,7 @@ describe('configuration', () => {
       ReturnType<BaseQueryFn>,
       Parameters<BaseQueryFn>
     >()
-    baseBaseQuery.mockRejectedValue(new Error('rejected'))
+    baseBaseQuery.mockResolvedValue({ error: 'rejected' })
 
     const baseQuery = retry(baseBaseQuery)
     const api = createApi({
@@ -46,7 +46,7 @@ describe('configuration', () => {
       ReturnType<BaseQueryFn>,
       Parameters<BaseQueryFn>
     >()
-    baseBaseQuery.mockRejectedValue(new Error('rejected'))
+    baseBaseQuery.mockResolvedValue({ error: 'rejected' })
 
     const baseQuery = retry(baseBaseQuery, { maxRetries: 3 })
     const api = createApi({
@@ -71,7 +71,7 @@ describe('configuration', () => {
       ReturnType<BaseQueryFn>,
       Parameters<BaseQueryFn>
     >()
-    baseBaseQuery.mockRejectedValue(new Error('rejected'))
+    baseBaseQuery.mockResolvedValue({ error: 'rejected' })
 
     const baseQuery = retry(baseBaseQuery, { maxRetries: 3 })
     const api = createApi({
@@ -109,8 +109,8 @@ describe('configuration', () => {
       Parameters<BaseQueryFn>
     >()
     baseBaseQuery
-      .mockRejectedValueOnce(new Error('rejected'))
-      .mockRejectedValueOnce(new Error('rejected'))
+      .mockResolvedValueOnce({ error: 'rejected' })
+      .mockResolvedValueOnce({ error: 'rejected' })
       .mockResolvedValue({ data: { success: true } })
 
     const baseQuery = retry(baseBaseQuery, { maxRetries: 10 })
@@ -136,7 +136,7 @@ describe('configuration', () => {
       ReturnType<BaseQueryFn>,
       Parameters<BaseQueryFn>
     >()
-    baseBaseQuery.mockRejectedValue(new Error('rejected'))
+    baseBaseQuery.mockResolvedValue({ error: 'rejected' })
 
     const baseQuery = retry(baseBaseQuery, { maxRetries: 3 })
     const api = createApi({
@@ -263,7 +263,7 @@ describe('configuration', () => {
       ReturnType<BaseQueryFn>,
       Parameters<BaseQueryFn>
     >()
-    baseBaseQuery.mockRejectedValue(new Error('rejected'))
+    baseBaseQuery.mockResolvedValue({ error: 'rejected' })
 
     const baseQuery = retry(retry(baseBaseQuery, { maxRetries: 3 }), {
       maxRetries: 3,
@@ -291,7 +291,7 @@ describe('configuration', () => {
       ReturnType<BaseQueryFn>,
       Parameters<BaseQueryFn>
     >()
-    baseBaseQuery.mockRejectedValue(new Error('rejected'))
+    baseBaseQuery.mockResolvedValue({ error: 'rejected' })
 
     const baseQuery = retry(baseBaseQuery, {
       maxRetries: 8,