title: Spy on mock service worker (msw)?
body: <p>I'm starting to use the <a href="https://mswjs.io/" rel="noreferrer">msw (mock service worker)</a> after watching <a href="https://github.com/leighhalliday/msw-example" rel="noreferrer">this example</a> of how to use it for testing API calls in React applications.</p>
  <p>Is there any way that we can spy on the mock service worker?</p>
  <p>For example:</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import { render, act, await } from '@testing-library/react'
  import userEvent from '@testing-library/user-event'
  import { rest } from 'msw'
  import { setupServer } from 'msw/node'
  
  import SearchBox from '.'
  
  const fakeServer = setupServer(
    rest.get(
      'https://api.flickr.com/services/rest/?method=flickr.photos.search',
      (req, res, ctx) =&gt; res(ctx.status(200), ctx.json({ data: { photos: { photo: [] },},}))
    )
  )
  
  beforeAll(() =&gt; {fakeServer.listen()})
  afterEach(() =&gt; {fakeServer.resetHandlers()})
  afterAll(() =&gt; fakeServer.close())
  
  test('it calls Flickr REST request when submitting search term', async () =&gt; {
    const { getByLabelText } = render(&lt;SearchBox /&gt;)
    const input = getByLabelText('Search Flickr')
    const submitButton = getByLabelText('Submit search')
  
    await act(async () =&gt; {
      await userEvent.type(input,'Finding Wally')
      await userEvent.click(submitButton)
    })
  
    await wait()
  
    // TODO: assert that the fakeServer was called once and with the correct URL
  })
  </code></pre>
  <p>The component to test looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState } from 'react'
  import axios from 'axios'
  
  import './index.css'
  
  function SearchBox({ setPhotos }) {
    const [searchTerm, setSearchTerm] = useState('')
  
    const handleTyping = (event) =&gt; {
      event.preventDefault()
      setSearchTerm(event.currentTarget.value)
    }
  
    const handleSubmit = async (event) =&gt; {
      event.preventDefault()
      try {
        const restURL = `https://api.flickr.com/services/rest/?method=flickr.photos.search&amp;api_key=${
          process.env.REACT_APP_API_KEY
        }&amp;per_page=10&amp;format=json&amp;nojsoncallback=1'&amp;text=${encodeURIComponent(
          searchTerm
        )}`
        const { data } = await axios.get(restURL)
        const fetchedPhotos = data.photos.photo
        setPhotos(fetchedPhotos)
      } catch (error) {
        console.error(error)
      }
    }
  
    return (
      &lt;section style={styles.container}&gt;
        &lt;form action=&quot;&quot; method=&quot;&quot; style={styles.form}&gt;
          &lt;input
            aria-label=&quot;Search Flickr&quot;
            style={styles.input}
            value={searchTerm}
            onChange={handleTyping}
          /&gt;
          &lt;button
            aria-label=&quot;Submit search&quot;
            style={styles.button}
            onClick={handleSubmit}
          &gt;
            SEARCH
          &lt;/button&gt;
        &lt;/form&gt;
      &lt;/section&gt;
    )
  }
  </code></pre>
  <p>I have got a working test, but I feel it leans towards an implementation test since it uses a spy on the <code>setPhotos</code></p>
  <pre class="lang-js prettyprint-override"><code>test('it calls Flickr REST request when submitting search term', async () =&gt; {
    const fakeSetPhotos = jest.fn(() =&gt; {})
    const { getByLabelText } = render(&lt;SearchBox setPhotos={fakeSetPhotos} /&gt;)
    const input = getByLabelText('Search Flickr')
    const submitButton = getByLabelText('Submit search')
  
    await act(async () =&gt; {
      await userEvent.type(input, 'Finding Walley')
      await userEvent.click(submitButton)
    })
  
    await wait()
  
    expect(fakeSetPhotos).toHaveBeenCalledWith([1, 2, 3])
  })
  </code></pre>