Detox with MSW

[xpt300]

Description

Hello,

I would like to use MSW to intercept the call api and return my fixtures.
After several tries I am still stuck with "Network request failed".

Can you give me some advice on how to set up MSW for detox?

attached my class CustomDetoxEnvironment
I tested the api mock with a simple jest test that works, to be sure that the problem was not a bad routing in MSW and I checked well the urls are good between the MSW server and the fetch of my application.

I am wondering if it is possible to use MSW with detox? Is there anything missing?

This is my jest config

module.exports = {
  maxWorkers: 1,
  testTimeout: 120000,
  rootDir: "..",
  testMatch: ["<rootDir>/e2e/**/*.test.js"],
  verbose: true,
  reporters: ["detox/runners/jest/reporter"],
  setupFilesAfterEnv: ["<rootDir>/e2e/jest.setup.js"],
  globalSetup: "detox/runners/jest/globalSetup",
  globalTeardown: "detox/runners/jest/globalTeardown",
  testEnvironment: "detox/runners/jest/testEnvironment",
}

and this is my simple test

import { device } from "detox"
import { authentification, loginScreenCheck } from "../services/loginScreen"
import { expectBitmapsToBeEqual } from "./utils/bitmapsToBeEqual"
import { setVariableDemoMode } from "../services/demoMode"

describe("Happy path", () => {
  it("should show login screen", async () => {
    await loginScreenCheck()
    const snapshottedImagePath = "./e2e/assets/ios/LoginScreen/login_screen.png"
    const imagePath = await device.takeScreenshot("login_screen")
    expectBitmapsToBeEqual(imagePath, snapshottedImagePath)
  })

  it("I log in", async () => {
    await authentification("jon.snow@needhelp.com", "42424242")
  })
})

jest.setup.js

const { setVariableDemoMode } = require("./services/demoMode")
import { server } from "@needhelp/shared-client/mocks/server"

// Establish API mocking before all tests.
beforeAll(async () => {
  server.listen({ onUnhandledRequest: "bypass" })
  await device.launchApp({ permissions: { notifications: "YES", calendar: "YES", userTracking: "NO" } })
  setVariableDemoMode()
})

// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => {
  server.resetHandlers()
})
// Clean up after the tests are finished.
afterAll(() => server.close())

Your environment

Detox version: 20.1.1
React Native version: 0.70.6
Node version: 16.13.2
Device model: Iphone 13
OS: 15.0
Test-runner (select one): jest

[asafkorem]

Hi @xpt300, I don't have experience using MSW, so I am unable to provide advice on how to set it up for your Detox tests. However, I recommend joining our Discord server and asking for help there, as someone may have already integrated MSW with Detox and may be able to assist you.

[xpt300]

Ok I finally found where it came from and the answer is stupid haha
There was a missing fetcher in jest I added import "whatwg-fetch" and everything works... Thanks for your help :)

[asafkorem]

Thank you for sharing that the issue was resolved. It's helpful to know about this framework as it may be useful for others who are looking for it 👍🏼

[ShivamJoker]

@xpt300 do you mind sharing more info how you implemented the mocking?