Server events

Mocks must resemble actual usage. That is a core philosophy when it comes to designing APIs in MSW. While Server-Sent Events are consumed via the EventSource standard API, there is no standard way of defining such events from the server. Because of that, MSW takes the liberty of designing a custom API that remains standard-based while providing a type-safe and ergonomic way of working with Server-Sent Events.

Event object

A server event is an object of the following shape:

PropertyTypeDescription
idstring (Optional)Custom event ID.
datastringEvent payload.
eventstring (Optional)Custom event name.
retrynumber (Optional)Reconnection time.

Sending events

To send a mock server-sent event, call client.send() and provide it with the event object:

sse('/stream', ({ client }) => {
  client.send({ data: 'hello world' })
})

Creating this request handler will send the “hello world” event to the EventSource matching the handler’s predicate (/stream):

// your-app.ts
const source = new EventSource('/stream')
event.addEventListener('message', (event) => {
  console.log(event.data) // "hello world"
})

Next steps

Explore what you can do with the sse API on the following pages:

Message events

Mocking server message events.

Custom events

Mocking custom server events.

Retry

Mocking the reconnection time.