Integration with Node.js

[mirmak4]

Hello,

I am trying to integrate MSW with Node.js.

My assignment is to steup MSW, as a standalone mock server, using express.

Then have Angular frontend tests when run, can call that mock server.

I follow the instructions of Node.js integration in the official docs.

So first I installed the MSW, running following command in the main folder of node application:

npm install msw --save-dev

Then I defined a simple handler.js file:

const { http, HttpResponse } = require("msw")

const handlers = [
  http.get("http://localhost:3000", () => {
    return HttpResponse.json(
      { "message": "Hello World, it works!" },
      { "status": 200 }
    );
  }),
  http.get("http://localhost:3000/movie", () => {
    return HttpResponse.json(
      { "message": "Hello World, a good movie!" },
      { "status": 200 }
    );
  }),
];

module.exports = { handlers }

Then I setup the MSW server in node.js file:

const { setupServer } = require("msw/node")
const { handlers } = require("./handlers")

// setup http server with requests handlers
const server = setupServer(...handlers);
server.events.on('request:start', ({ request }) => {
  console.log('MSW intercepted:', request.method, request.url)
})

module.exports = { server }

And finally in index.js I start the node application and start listening for requests:

const { server } = require("./mocks/node")

server.listen()

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World, / !')
})

app.get('/movie', (req, res) => {
  res.send('Hello World, /movie!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
  console.log('hello world')
  
  // server.listen()
})

But unfortunately when I run the application, open the browser and go to localhost:3000/ or localhost:3000/movie,
I get the responses from index.js, not the mocked ones.

As I am new to Node and MSW, I don't know what I am doing wrong.

I was looking at official examples, but couldn't find any with node integration.

Thanks for any help.

EDIT 1

Thanks Artem!

I switched to http middleware setup instead, it works !!!

here is what I have.

My handlers still the same as they were:

const { http, HttpResponse } = require("msw")

const handlers = [
  http.get("http://localhost:3000", () => {
    return HttpResponse.json(
      { "message": "Hello World, it works!" },
      { "status": 200 }
    );
  }),
  http.get("http://localhost:3000/movie", () => {
    return HttpResponse.json(
      { "message": "Hello World, a good movie!" },
      { "status": 200 }
    );
  }),
];

module.exports = { handlers }

My node.js which setups a standalone express server, but much simpler and provided by MSW:

const { createServer } = require("@mswjs/http-middleware")
const { handlers } = require("./handlers")

const httpServer = createServer(...handlers)

module.exports = { httpServer }

And finally my main application index:

const { httpServer } = require("./mocks/node")

httpServer.listen(3000)

And when go to localhost:300 or localhost:3000/movie, get the mocked responses :)

Edit 2

Only one thing is still unclear to me.

There are two separate projects, one is above Node mock application.

The other is the real Angular frontend application.

How can I setup MSW server, from the Angular test setup ?

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

How can I make this setup, if both mock and frontend are separate projects ?

Also what is the difference between createServer() and createMiddleware() in @mswjs/http-middleware ?

Thanks for any help.

[kettanaito]

Hi, @mirmak4.

What you are missing is this part:

as a standalone mock server, using express.

MSW on its own never spawns any servers. But you can take the request handlers you've defined and create an HTTP server out of them using the @mswjs/http-middleware package.

Add this file to your setup:

// mock-server.js
import { createServer } from '@mswjs/http-middleware'
import { handlers } from './handlers.js'

const httpServer = createServer(...handlers)
httpServer.listen(3001)

You don't need the file with server.listen() and server.close() at all in your setup. You can create that file if you are planning on using MSW in a Node.js process without any servers. That would be a common testing setup we describe in the docs. In fact, I'd recommend you reconsider your original requirement as running MSW without a server has numerous advantages.

Then, make sure you start this server before your tests. You can do so however you chose (e.g. using the start-server-and-test package).

[mirmak4]

Thanks Artem, it works!

May I have additional question, really sorry for spamming you with all those questions,
which may sound really stupid to you.

What if additionally to the above localhost handlers (for the local application),
would like also to mock some third party services ?

Let's say that the frontend application at some point has to call some external service,
on some button click for example, let's say http://api.example.com/

How could this be achieved, preserving the current localhost setup as well ?

I tried to mock the http://api.example.com/ path in the current setup, but it didn't work.

Could this be achieved by adding the core MSW dependency, and using setupServer(), providing separate handlers, just for that api.example.com service, and then call server.listen() next to the current httpServer.listen() in the index.js ?