Question: why I cannot see my request even cannot see it x-powered-by: msw

Environment

Name	Version
msw	0.24.0
browser	chrome
OS	MacOS 11.0.1

Request handlers

const allRecipes = {
    "0": {
        "id": "1",
        "text": "burger"
    },
    "1": {
        "id": "2",
        "text": "fish"
    },
    "2": {
        "id": "3",
        "text": "pizza"
    },
    "3": {
        "id": "4",
        "text": "lazagne"
    }
}

const server = setupServer(
  rest.get('http://myurl/receipes', (_, res, ctx) => {
    ctx.status(200)
    return res(ctx.json({ allRecipes }))
  })
)
beforeAll(() => server.listen())
afterAll(() => server.close())


test('fetches and displays all receipes', async () => {
  render(<Recipes />)
  const listItems = await screen.findAllByRole('listitem')
  expect(listItems).toHaveLength(8)
  expect(listItems[0]).toHaveTextContent('burger')
  expect(listItems[1]).toHaveTextContent('fish')
  expect(listItems[2]).toHaveTextContent('pizza')
})

Actual request: Recipes.tsx

export default function Recipes() {
      const [recipes, setRecipes] = useState({})
          const fetchAllRecipes = async () => {
            const response = await fetch('http://myurl/receipes')
            if (response.ok) {
              const jsonResponse = await response.json()
              setRecipes(jsonResponse)
            }
          }
        
          useEffect(() => {
            fetchAllRecipes()
          }, [])
return (
    <div>
      <ul>
        {Object.entries(recipes).map((element: any) => (
         <li>{element[1].id}</li>
 <li> {element[1].text}</li>
        ))}
      </ul>
    </div>

Current behavior

When I run the test it works for others but for the current one it fails to test it despite that I have added whatwg-fetch dependency for using node to fetch the request but somehow it cannot render the element and it shows this result:

 ● fetches and displays all receipes

    expect(received).toHaveLength(expected)

    Expected length: 8
    Received length: 2
    Received array:  [<li />, <li />]

      46 |
      47 |   const listItems = await screen.findAllByRole('listitem')
    > 48 |   expect(listItems).toHaveLength(8)

also in the browser it’s not showing that it is x-powered-by: msw but instead it is showing x-powered-by: Express

Expected behavior

The expected behavior is to have a length of the recipes as 8 but its not showing them

So is there something wrong with it or it me who is configuring things incorrectly? PS: I wanted to give a thank about the package as it is super helpful and super powerful and I love it!

[marcosvega91]

I understand the issue, I didn’t see before. @timdeschryver has right you should do has he suggested or you can return directly the object. There is also another issue, the status should be inside res function

return res(ctx.status(200),ctx.json(allRecipes))

[timdeschryver]

I do think there’s something wrong with the code, does it render correctly in the browser? The mocked response has the following structure:

{ 
  "allRecipes": {...}
}

I’m not fluent in react, but I suppose you have to “grab” allRecipes from the response body before invoking Object.entries. E.g.:

Object.entries(recipes.allRecipes)