Add globalResponses configuration

src/config.ts

@@ -26,4 +26,4 @@ function configure(newConfig: Partial<Config>) {
 
 const getConfig = (): Config => ({ ...config })
 
-export { configure, getConfig, Config, mount }
+export { configure, getConfig, mount }

src/models.ts

@@ -72,6 +72,7 @@ export interface Config {
   mount: Mount
   extend: Extensions
   changeRoute: (path: string) => void
+  defaultResponses?: Array<WrapResponse>
   history?: BrowserHistory
   portal?: string
   handleQueryParams?: boolean

src/wrap.tsx

@@ -113,7 +113,7 @@ const debugRequests = () => {
 }
 
 const getMount = () => {
-  const { portal, changeRoute, history, mount } = getConfig()
+  const { portal, changeRoute, history, mount, defaultResponses } = getConfig()
   const { Component, props, responses, path, hasPath, debug, historyState } =
     getOptions()
 
@@ -137,7 +137,12 @@ const getMount = () => {
     changeRoute(path)
   }
 
-  mockNetwork(responses, debug)
+  let mockedResponses: Response[] = [...responses]
+  if (defaultResponses) {
+    mockedResponses = [...mockedResponses, ...defaultResponses]
+  }
+
+  mockNetwork(mockedResponses, debug)
 
   return mount(<C {...props} />)
 }

tests/components.mock.jsx

@@ -347,3 +347,35 @@ export const GreetingComponent = () => {
 
   return <div>Hi {name}!</div>
 }
+
+export const MyComponentWithFeatureFlags = () => {
+  const [flags, setFlags] = useState([])
+
+  useEffect(() => {
+    const retrieveFeatureFlags = async () => {
+      try {
+        const request = new Request('my-host/feature-flags')
+        const response = await fetch(request)
+        if (!response) return
+        const { flags } = await response.json()
+
+        setFlags(flags)
+      } catch (e) {
+        setFlags([])
+      }
+    }
+
+    retrieveFeatureFlags()
+  }, [])
+
+  return (
+    <>
+      <h1>Feature flags test</h1>
+      {flags.includes('my-flag') && (
+        <div>
+          <span>Feature Flag enabled</span>
+        </div>
+      )}
+    </>
+  )
+}

tests/lib/withNetwork.test.ts

@@ -1,4 +1,3 @@
-import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { wrap, configure } from '../../src/index'
 import { vi, it, expect } from 'vitest'
@@ -8,6 +7,7 @@ import {
   MyComponentWithPost,
   MyComponentWithFeedback,
   MyComponentMakingHttpCallsWithQueryParams,
+  MyComponentWithFeatureFlags,
 } from '../components.mock'
 
 it('should have network by default', async () => {
@@ -219,3 +219,81 @@ it('should handle fetch requests with option when a string is passed', async ()
 
   expect(response).toEqual({ foo: 'bar' })
 })
+
+it('should be able to define global fetch mocks', async () => {
+  configure({
+    mount: render,
+    defaultResponses: [
+      {
+        path: 'my-host/feature-flags',
+        responseBody: {
+          flags: ['my-flag'],
+        },
+      },
+    ],
+  })
+
+  wrap(MyComponentWithFeatureFlags).mount()
+
+  expect(await screen.findByText(/feature flag enabled/i)).toBeVisible()
+})
+
+it('should be able to override global fetch mocks', async () => {
+  configure({
+    mount: render,
+    defaultResponses: [
+      {
+        path: 'my-host/feature-flags',
+        responseBody: {
+          flags: ['my-flag'],
+        },
+      },
+    ],
+  })
+
+  wrap(MyComponentWithFeatureFlags)
+    .withNetwork([
+      {
+        path: 'my-host/feature-flags',
+        responseBody: {
+          flags: ['another-flag'],
+        },
+      },
+    ])
+    .mount()
+
+  expect(await screen.findByText(/feature flags test/i)).toBeVisible()
+  expect(screen.queryByText(/feature flag enabled/i)).not.toBeInTheDocument()
+})
+
+it('should work with extensions', async () => {
+  configure({
+    mount: render,
+    defaultResponses: [
+      {
+        path: 'my-host/feature-flags',
+        responseBody: {
+          flags: ['my-flag'],
+        },
+      },
+    ],
+    extend: {
+      withCustomFlags: ({ addResponses }, [otherResponses = []]) => {
+        addResponses([
+          {
+            path: 'my-host/feature-flags',
+            responseBody: {
+              flags: ['another-flag'],
+            },
+          },
+          ...otherResponses,
+        ])
+      },
+    },
+  })
+
+  wrap(MyComponentWithFeatureFlags).withCustomFlags().mount()
+
+  expect(await screen.findByText(/feature flags test/i)).toBeVisible()
+  expect(screen.queryByText(/feature flag enabled/i)).not.toBeInTheDocument()
+})