server.use(handler) is not overriding original one?

[Geddard]

Hey there, I'm really puzzled about this one... I've followed all the docs, tried writing and re-writing the code many times in case I made some mistake, and tried to follow advice from a few posts I found about similar issues.
But I can't figure out why when I try to add a new handler with server.use it's not working.

The weirdest part is that if I do printHandlers, I see my new handler (first on the top of the printed list) but using console log I see the original one is being executed every time...

Here's the setup I have:

on setupJest.js which I add through setupFilesAfterEnv in jest.config.js I have this

import { cleanup } from '@testing-library/react'
import faker from 'faker'
import { setupServer } from 'msw/node'

import { handlers } from '__mocks/handlers'

export const server = setupServer(...handlers)

beforeAll(() => {
  faker.seed(0)
  server.listen()
})

afterEach(() => {
  cleanup()
  server.resetHandlers()
  faker.seed(0)
})

afterAll(() => server.close())

export default server

then on my test file:

describe('Details Page', () => {
  it('should render without errors', async () => {
    const { objects } = exploreData({ count: 1, seed: 1 })
    const { asFragment, getAllByRole } = await render(
      <DetailsPage id={objects[0].guid} assetType={objects[0].asset_type} />
    )

    await waitFor(() => {
      const tableRow = getAllByRole('row')

      expect(tableRow.length).toEqual(objects[0].columns.length + 1) // +1 because we count the head row
    })

    expect(asFragment()).toMatchSnapshot()
  })

  describe('with different data', () => {
    it('should render with owner info', async () => {
      faker.seed(2)

      server.use(
        rest.get(URLS.details, (req, res, ctx) => {
         /* detailsData uses faker with the new seed if i call it independently,
          * but it's never being called by this handler :/
          * /
          return res(ctx.status(200), ctx.json(detailsData())) 
        })
      )
      
      const { objects } = exploreData({ count: 1, seed: 1 })
      const { asFragment, getAllByRole } = await render(
        <DetailsPage id={objects[0].guid} assetType={objects[0].asset_type} />
      )

      await waitFor(() => {
        const tableRow = getAllByRole('row')

        expect(tableRow.length).toEqual(objects[0].columns.length + 1) // +1 because we count the head row
      })

      expect(asFragment()).toMatchSnapshot()
    })
  })
})

And finally, when using printHandlers, I see this at the top of the list (being printed first I guess)

console.log
      [rest] GET http://localhost:8080/v3/assets/:assetType/:id
        Declaration: [...]/src/pages/details/DetailsPage.test.js:35:14 // New one that doesn't execute

    console.log
      [rest] GET http://localhost:8080/v3/assets/:assetType/:id
        Declaration: [...]/src/mocks/handlers/details.js:12:17 // Old one that should be overriden

My wild guess is that URLs with wildcards are not properly overridden maybe?

The other weird thing is that a similar case but using worker.use does work properly, but not for server.use

Ideas on what could I be doing wrong here?

Let me know if you need any more info, and thanks!

[Geddard]

Figured it out... the return res(ctx.status(200), ctx.json(detailsData())) line was not working because detailsData was not imported correctly, but msw was not allowing the error to be logged in the console i believe...

[kettanaito]

Hey, @Geddard. Glad you've figured it out.

Please, could you elaborate on that last bit: what was MSW not allowing?

[Geddard]

the import for the detaiulsData function was not correct, since i dont have the best intellisense config in my current project, i didn't notice this until i tried to call the function outside of the rest callback.
So the error about this wrong import was supresed somehow inside it

[kettanaito]

I don't think that's the library's doing. Most likely the code determines that your import is invalid only when you attempt to call undefined(). There are no means for the library to silence such import errors.

Do you use plain JavaScript or something else?

[Geddard]

yeah plain JS with react.

im not sure what's the deal then, but i found the issue doing this:

import detailsData from '../detailsData' // this was wrong, should be { detailsData } but my vscode doesn't tell me it's wrong so i only see it as an error when compiling

describe(..., () => {
  it(..., () => {
    console.log(detailsData()) // Here i get an error in the output for the import

    server.use(
      rest.get(..., (...) => {
         return res(ctx.status(200), ctx.json(detailsData())) // same type of execution as before, but i dont see errors anywhere
      }
    )
  }
}

[kettanaito]

The import expressions are evaluated regardless of the missing export of the corresponding type (default/named). Such import statements are not fundamentally invalid, as you may export something by default from a module later. Instead, importing a non-existing export type stores its value as undefined. Operating with undefined then throws runtime exceptions, for example, if you mean to call something that doesn't exist as a function.

My advice is to consider a linter (i.e. ESLint) which may warn on logical issues like this.