Support local server for complex testing scenarios

[mswjs]

Support local server for complex testing scenarios

[kettanaito]

This is how I see such setup working:

// Do not confuse with the "spawnServer" utility already present
// to spawn a Webpack Dev Server. Naming is hard.
import { spawnServer } from '../utils/spawnServer'

let server

beforeAll(() => {
  server = spawnServer(app => {
    app.post('/users', (req, res) => {
      res.status(301).json({ actual: 'response' })
    })
  })
})

afterAll(() => {
  // Needs to return a Promise.
  // If Express API doesn't do that, wrap in a custom function.
  return server.instance.close()
})

describe('Test case', () => {
  it("scenario", async () => {
    // Abstracted API to get the proper route in order to not rely
    // on exact server port number.
    const REQUEST_URL = server.getRoute('/users')
    api.page.evaluate((url) => fetch(url, { method: 'POST' }), REQUEST_URL)
    // continue with assertions...
  })
})

[kettanaito]

Since MSW already has a spawnServer utility function that's responsible for spawning a temporary WDS for the purpose of having a client page to load in Puppeteer, this task may be a matter of spawnServer accepting a parameter that would modify the WDS's app instance to declare the necessary routes.

spawnServer('/path/to/file.mocks.ts', {
  withRoutes(app) {
    app.post('/api/mock', (req, res) => {
      res.status(200).json({ response: true })
    })
  }
})

The benefits we get from entwining this logic into existing spawnServer:

• Manage only one instance of server that acts as both client-side page and a mock of an actual server implementation to assert test scenarios that requires such (i.e. Response patching)
• Have a single point of control over the server's lifecycle (it reports back its port number and a cleanup function, making its detection and termination easier inside tests)