MSW - nodejs setupServer, server.listen() is not starting mock server in monorepo angular 16

59 Views Asked by At

server.listen() is not starting mock server, getting "Error: connect ECONNREFUSED 127.0.0.1:3001".

I'm trying to setup MSW - nodejs for our mono repo angular 16 application.

Node: v18.10.0

msw: 2.1.5

server.js: 
import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';
const handlers = [
  http.get('http://localhost:3001/uem-mod-ui/device-list', () => {
    return HttpResponse.json({
      "size": 10,
      "from": 0,
      "total": 15,
      "results": [],
      "defaultColumns": []
    });
  }),
];
// This configures a request mocking server with the given request handlers.
const server = setupServer(...handlers);
server.listen({ onUnhandledRequest: 'error' });

Running it using below command:

npm run e2e:fake

package.json:
{
  "name": "@modern-ui/source",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "e2e:fake": "node server.js",
    "serve": "nx serve uem-mod-ui",
    "precommit": "nx affected:lint"
  },
  "private": true,
  "type": "module",
  "dependencies": {
    "@angular/animations": "~16.2.0",
    "@angular/cdk": "~16.2.0",
    "@angular/common": "~16.2.0",
    "@angular/compiler": "~16.2.0",
    "@angular/core": "~16.2.0",
    "@angular/forms": "~16.2.0",
    "@angular/platform-browser": "~16.2.0",
    "@angular/platform-browser-dynamic": "~16.2.0",
    "@angular/router": "~16.2.0",
    "@codeceptjs/ui": "^0.7.0",
    "@ngrx-utils/store": "^0.14.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@nrwl/angular": "16.7.1",
    "@nx/angular": "16.7.1",
    "codeceptjs": "^3.5.10",
    "playwright": "^1.40.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rxjs": "~7.8.1",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.1602.10",
    "@angular-devkit/build-angular": "~16.2.0",
    "@angular-devkit/core": "~16.2.0",
    "@angular-devkit/schematics": "~16.2.0",
    "@angular-eslint/eslint-plugin": "^16.0.0",
    "@angular-eslint/eslint-plugin-template": "^16.0.0",
    "@angular-eslint/template-parser": "^16.0.0",
    "@angular/cli": "~16.2.0",
    "@angular/compiler-cli": "~16.2.0",
    "@angular/language-service": "~16.2.0",
    "@cds/core": "^6.7.0",
    "@clr/angular": "^16.1.0",
    "@clr/core": "^4.0.15",
    "@clr/icons": "^13.0.2",
    "@clr/ui": "^16.1.0",
    "@danielmoncada/angular-datetime-picker": "^16.0.1",
    "@dpa/ui-common": "16.16.0-release.1700581256",
    "@nx/eslint-plugin": "~16.7.0",
    "@nx/jest": "16.7.1",
    "@nx/js": "16.7.1",
    "@nx/linter": "16.7.1",
    "@nx/playwright": "16.7.1",
    "@nx/storybook": "16.7.1",
    "@nx/web": "16.7.1",
    "@nx/workspace": "16.7.1",
    "@schematics/angular": "~16.2.0",
    "@storybook/addon-essentials": "7.2.1",
    "@storybook/addon-interactions": "7.2.1",
    "@storybook/angular": "7.2.1",
    "@storybook/builder-webpack5": "7.2.1",
    "@storybook/core-server": "7.2.1",
    "@storybook/jest": "~0.1.0",
    "@storybook/test-runner": "^0.13.0",
    "@storybook/testing-library": "~0.2.0",
    "@tinkoff/ng-event-plugins": "^3.1.0",
    "@types/jest": "^29.4.0",
    "@types/lodash-es": "^4.17.10",
    "@types/node": "16.11.7",
    "@types/quill": "^2.0.14",
    "@typescript-eslint/eslint-plugin": "^5.60.1",
    "@typescript-eslint/parser": "^5.60.1",
    "@webcomponents/webcomponentsjs": "^2.8.0",
    "css-element-queries": "^1.2.3",
    "eslint": "^8.46.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-ban": "^1.6.0",
    "eslint-plugin-header": "^3.1.1",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsdoc": "^46.9.1",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "eslint-plugin-prettier": "^5.1.0",
    "eslint-plugin-spellcheck": "^0.0.20",
    "flat": "^6.0.1",
    "highlight.js": "^11.6.0",
    "husky": "^8.0.3",
    "jest": "^29.4.1",
    "jest-canvas-mock": "^2.5.2",
    "jest-environment-jsdom": "^29.4.1",
    "jest-junit": "^16.0.0",
    "jest-mock": "^29.7.0",
    "jest-preset-angular": "~13.1.0",
    "jest-raw-loader": "^1.0.1",
    "lit-element": "^3.3.2",
    "lit-html": "^2.7.4",
    "lodash-es": "^4.17.21",
    "lottie-web": "^5.12.0",
    "marked": "^4.3.0",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.43",
    "msw": "^2.1.5",
    "ng-mocks": "^14.11.0",
    "ng-packagr": "~16.2.0",
    "ngx-color": "^9.0.0",
    "ngx-highlightjs": "^7.0.1",
    "ngx-markdown": "^16.0.0",
    "ngx-quill": "^23.0.2",
    "nx": "16.7.1",
    "nx-stylelint": "~16.0.0",
    "postcss": "^8.4.5",
    "postcss-import": "~14.1.0",
    "postcss-preset-env": "~7.5.0",
    "postcss-url": "~10.1.3",
    "prettier": "^3.1.1",
    "quill": "^1.3.7",
    "raw-loader": "^4.0.2",
    "reflect-metadata": "^0.1.13",
    "stylelint": "^15.0.0",
    "stylelint-config-standard": "^30.0.0",
    "stylelint-config-standard-scss": "^7.0.0",
    "ts-jest": "^29.1.0",
    "ts-node": "^10.9.1",
    "tslib": "^2.3.0",
    "typescript": "~5.1.3",
    "webpack": "^5.89.0"
  },
  "resolutions": {
    "webpack": "^5.89.0"
  }
}

Tried to setup msw server and starting mock server using server.listen(). After executing it, server is not reachable. Getting "Error: connect ECONNREFUSED 127.0.0.1:3001" \[enter image description here\](https://i.stack.imgur.com/vrkBb.png)\[tag:tag-name\]

0

There are 0 best solutions below