Is there a way to change handlers mid-test?

[jordanss1]

I don't mean server.use() at the start of a test, I mean, for example, use the default server with it's handlers for a first search and then on a second search use the next handler.

Here's an example:

Line 55 makes a search with the default handlers, line 65 would theoretically "change" the handlers, if possible.

The reason I need to do this is because when I make a new search I can't see if it is a new response, because the responses are identical (same array).

I hope this makes sense

[kettanaito]

Hey, @jordanss1.

The server.use() API doesn't have to be called at the start of the test. You can call it anywhere, including in the middle of the test, to alter the way requests are handled.

Here's an example of changing the network behavior mid-test:

import { rest } from 'msw'
import { setupServer } from 'msw/node'

const server = setupServer(
  rest.post('/search', (req, res, ctx) => {
    // Let's return no search results by default.
    return res(ctx.json([]))
  })
)

beforeAll(() => server.listen())

// Make sure to reset the handlers after each test
// so that handlers you prepend via "server.use()"
// do not persist between tests.
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

it('displays new search results', async () => {
  // Making the initial search attempt.
  // The default request handler for POST /search
  // is handling this so we get no search results.
  await renderApp()
  const results =await search('porcelain')
  expect(results).toEqual([])

  // Here, let's change the response to POST /search
  // to return a list of search results.
  server.use(
    rest.post('/search', (req, res, ctx) => {
      return res(ctx.json([
        { title: 'Porcelain' },
        { title: 'Porcelain: A Memoir'}
      ]))
    })
  )
  const newResults = await search('porcelain')
  expect(newResults).toEqual([
    { title: 'Porcelain' },
    { title: 'Porcelain: A Memoir'}
  ])
})

[jordanss1]

Hello @kettanaito and thank you for your response to my question.

The thing is, I have done exactly that and I still get the same array returned from the default handler.

The array from the default response has 10 items in the array.

When I call server.use() I substitute a handler that will respond with an array of 37 items. As you can see from the code below, after the handler is switched the test still fails with only 10 items in array.

Function that returns handlers and setupServer:

import { rest } from "msw";
import { setupServer } from "msw/node";
import { artistResultsSuccess } from "../api/mock";

export const artistAndTrackHandlers = (data) => {
  return [
    rest.post("https://accounts.spotify.com/api/token", (req, res, ctx) => {
      return res(ctx.status(200, "success"));
    }),

    rest.get("https://api.spotify.com/v1/search", (req, res, ctx) => {
      return res(ctx.status(200), ctx.body(data));
    }),
  ];
};

const data = artistAndTrackHandlers(artistResultsSuccess);

export const server = setupServer(...data);

Test where I switch handlers mid-test:

  test("The input makes a search and returns artists when there are already previous received", async () => {
    const { getByRole, debug, findAllByRole } = customRender(
      WrapperComponent,
      <>
        <Search />
        <SearchList />
      </>
    );

    //First search from the default handlers

    await renderComponentSearched(
      getByRole,
      "search-button-artists",
      "search-all-input"
    );

     // Returns a pass using default handler
    expect(await findAllByRole("artist-card")).toHaveLength(10);

    //Change handlers to receive different mocked results

    const data = artistAndTrackHandlers(artistResultsSuccessFull);
    server.use(...data);

    //Make new search for the changed response

    await renderComponentSearched(
      getByRole,
      "searchList-button",
      "searchList-input"
    );

    //This assertion fails because still using default handler
    expect(await findAllByRole("artist-card")).toHaveLength(37);
  });
});

Result of test:

  FAIL src/components/__tests__/SearchList.test.js
    ● The SearchList component on the /artists path › The input makes a search and returns artists when there are already previous received
  
      expect(received).toHaveLength(expected)
  
      Expected length: 37
      Received length: 10


      77 |
      78 |     //The new handler should respond with an array of length 37
    > 79 |     expect(await findAllByRole("artist-card")).toHaveLength(37);
         |                                                ^
      80 |   });
      81 | });

[kettanaito]

Make sure you have the caching disabled in your request clients (e.g. Axios). What you describe looks like a caching issue to me: the second iteration does a request but it never reaches the handlers because your request client responds from the cache. You can also validate that by putting a console.log statement in your artistResultsSuccessFull handlers. I bet it won't get called at all.

MSW is rather straightforward in that regard: whichever matching handles you have will be used. If something else is used, then it's likely that your code doesn't make that request how you think it should.

We are urging to Disable request client cache in the docs.

[jordanss1]

I checked and there are two console logs, one because of the beforeAll() in setupTests.js and the other is actually because of the server being modified in that call. So it seems it is being called.

FAIL src/components/__tests__/SearchList.test.js
  ● Console

    console.log
      first

      at artistAndTrackHandlers (src/mocks/handlers.js:4:11)

    console.log
      first

      at artistAndTrackHandlers (src/mocks/handlers.js:4:11)

I have done research and can't seem to find how to disable caching for Axios. I'm sorry man, I'm completely new to this.

Is it something that has to be done in the handlers for the MSW server or in my original Axios files that contain the real network requests? I saw someone say to add a timestamp param to the URL but then all my tests fail.

There was another suggestion to add extra headers but that too fails all my network request. Like I said I'm new to this any help would be appreciated.

Thanks

[jordanss1]

I figured it out after a week, it was my own implementation issue, nothing to do with MSW.

I didn't realize sessionStorage was affecting my test environment which I use in the regular application. I added sessionStorage.clear() to the setupTests file to clean the sessionStorage after each test.

This can be closed/answered.

[chrisjlee]

So did you end up using server.use() ? Is this the way to go about it ?

[jordanss1]

Sorry about the late response Chris. Yes, I put server.use() inside of a function and change my handlers with different responses provided as an argument.

Here is the link to the function: https://github.com/jordanss1/spotify-clone/blob/95618c676c48e343cf85afcd9137b915f9798336/src/components/__tests__/MainSearch.test.tsx#L64

You can see the use of the function inside that same test file.

[cmacdonnacha]

You can also use conditional responses using page url query params. Something like this.