Effect CommunityEC
Effect Community•5mo ago
Bence (Arzen)

Issue with FetchHttpClient and MSW in Test Environment with Happy-DOM

Hey. Does anybody know how effect treats FetchHttpClient in test environment?

I have the following layers, services defined:
const ViteConfigProvider = Layer.setConfigProvider(ConfigProvider.fromJson(import.meta.env))

const MainLayer = Layer.mergeAll(
  ClientSideCookieService,
  ConfigService.Default,
  CookieManagerService.Default,
  CryptService.Default,
  AdminApiService.Default,
).pipe(Layer.provide(FetchHttpClient.layer), Layer.provide(ViteConfigProvider))

export const RuntimeClient = ManagedRuntime.make(MainLayer)


I use the RuntimeClient in a couple of actions and I am trying to write unit test for a react hook that is using those actions.
I also have Mocked Service Worker (MSW) handlers setup but by the look of it, the FetchHttpClient doesn't fire any request. I only assume this as I am not very familiar how it works in test environment. Any idea how I could narrow the issue down?

For some more context I use:
- vitest
- happy-dom for this test file
- @testing-library/react to test the hook

My test-setup looks like this:
import { setupServer } from 'msw/node'
import { afterAll, afterEach, beforeAll } from 'vitest'

import { handlers } from './handlers'

// Setup MSW server to mock API requests
const server = setupServer(...handlers)

// Start server before all tests
beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))

// Reset handlers after each test
afterEach(() => server.resetHandlers())

// Close server after all tests
afterAll(() => server.close())

export { server }


I would assume that since I have import { setupServer } from 'msw/node',
this will only listen to (intercept) request fired from the node implementation of the fetch but happy-dom and my application will use the fetch implemented in window.
Was this page helpful?