Connection refused in react.js jest test (websocket closed)

Questions
, ,
1

How can I fix Error: connect ECONNREFUSED 127.0.0.1:3000 when running npm test?

The tests seem to pass:

npm test -- --watchAll=false

> daml-demo@0.1.0 test /home/circleci/project/ui
> react-scripts test --testURL='http://localhost:7575' "--watchAll=false"

 PASS  src/components/App.test.tsx (7.958s)
  ✓ renders without crashing (319ms)

  console.debug node_modules/@daml/types/index.js:69
    Registered template ...

  ...

  console.warn node_modules/react-dom/cjs/react-dom.development.js:88
    Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
    
    * Move data fetching code or side effects to componentDidUpdate.
    * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
    * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
    
    Please update the following components: TransitionMotion

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.426s
Ran all test suites.
events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: connect ECONNREFUSED 127.0.0.1:3000
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1146:16)
Emitted 'error' event on WebSocket instance at:
    at ClientRequest.<anonymous> (/home/circleci/project/ui/node_modules/ws/lib/websocket.js:579:15)
    at ClientRequest.emit (events.js:315:20)
    at Socket.socketErrorListener (_http_client.js:469:9)
    at Socket.emit (events.js:315:20)
    at emitErrorNT (internal/streams/destroy.js:106:8)
    at emitErrorCloseNT (internal/streams/destroy.js:74:3)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  errno: -111,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 3000
}
npm ERR! Test failed.  See above for more details.

The test is:

it('renders without crashing', () => {
  const div = document.createElement('div');
  document.body.appendChild(div);
  act(() => {
    ReactDOM.render(
      <Router>
          <App />
      </Router>,
      div);
    //ReactDOM.unmountComponentAtNode(div);
  });
});

If I uncomment the unmount... line, I also get a lot of:

Unhandled error. (Error: WebSocket was closed before the connection was established

  at WebSocket.close (node_modules/ws/lib/websocket.js:224:14)
  at Object.close (../../../language-support/ts/daml-ledger/index.ts:714:10)
  at apply (../../../language-support/ts/daml-react/createLedgerContext.ts:207:16)
  at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:188:14)
  ...
1 Like
2

It turned out the page calls useStreamQueries during rendering, so opened a more specific question: How to mock useStreamQueries in jest test?

1 Like