msw: Server does not complete setup before next test suite executes in Mocha

Environment

Name	Version
msw	0.27.0
node	12.19.0
OS	Linux x86_64

Request handlers

Note: I have created a repo displaying the behavior here.

App.test.js

import React from 'react';
import { render } from '@testing-library/react';
import { setupServer } from 'msw/node';
import { rest } from 'msw';
import App from '../App';

describe('App tests', () => {
  const server = setupServer(
    rest.post('http://localhost:8080/api/getList', (req, res, ctx) => {
      return res(
        ctx.set('access-control-allow-origin', '*'),
        ctx.json({
          msgCode: 0,
          msgDesc: 'Request processed successfully',
          data: {
            data: {
              createdBy: 'CJ',
              createdDate: '02/18/2021',
            },
            pagination: {
              pageNo: req.body.pagination.pageNo,
              pageSize: req.body.pagination.pageSize,
              total: 1,
              sortedColumn: req.body.pagination.sortedColumn,
              sortedType: req.body.pagination.sortedType,
            },
          },
        })
      );
    })
  );

  before(() => {
    server.listen();
  });

  after(() => {
    server.close();
  });

  it('renders App without crashing', () => {
    render(<App />);
  });
});

Child.test.js

import React from 'react';
import { render } from '@testing-library/react';
import { setupServer } from 'msw/node';
import { rest } from 'msw';
import Child from '../Child';

describe('Child tests', () => {
  const server = setupServer(
    rest.post('http://localhost:8080/api/getChildList', (req, res, ctx) => {
      return res(
        ctx.set('access-control-allow-origin', '*'),
        ctx.json({
          msgCode: 0,
          msgDesc: 'Request processed successfully',
          data: {
            data: {
              createdBy: 'CJ Child',
              createdDate: '02/18/2021',
            },
            pagination: {
              pageNo: req.body.pagination.pageNo,
              pageSize: req.body.pagination.pageSize,
              total: 1,
              sortedColumn: req.body.pagination.sortedColumn,
              sortedType: req.body.pagination.sortedType,
            },
          },
        })
      );
    })
  );

  before(() => {
    server.listen();
  });

  after(() => {
    server.close();
  });

  it('renders Child without crashing', () => {
    render(<Child />);
  });
});

Actual request

The actual request is simply performed on mount via the Fetch API (in our tests we are utilizing the isomorphic-fetch library to polyfill Fetch for Node).

function Child() {
  useEffect(() => {
    fetch('http://localhost:8080/api/getChildList', {
      method: 'POST',
      mode: 'cors',
      cache: 'no-cache',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        pagination: {
          pageSize: 10,
          pageNo: 0,
          sortedColumn: 'createdBy',
          sortedType: 'asc',
        },
      }),
    })
      .then(async (response) => {
        console.log('Fetch complete: ', await response.json());
      })
      .catch((error) => {
        console.error('Failed to fetch: ', error);
      });
  }, []);

  return (
    <React.Fragment>
      <h1>Child</h1>
    </React.Fragment>
  );
}

Current behavior

If we are running two test suites consecutively, in this case, App.test.js and then Child.test.js in quick succession, the second server is not fully set up before the test executes, resulting in something like this:

> mocha-ref@1.0.0 test:watch
> cross-env NODE_ENV=test mocha --timeout 10000 -w src/**/*.test.js



  App tests
    ✓ renders App without crashing
Fetch complete:  {
  msgCode: 0,
  msgDesc: 'Request processed successfully',
  data: {
    data: { createdBy: 'CJ', createdDate: '02/18/2021' },
    pagination: {
      pageNo: 0,
      pageSize: 10,
      total: 1,
      sortedColumn: 'createdBy',
      sortedType: 'asc'
    }
  }
}

  Child tests
    ✓ renders Child without crashing
Failed to fetch:  FetchError: request to http://localhost:8080/api/getChildList failed, reason: connect ECONNREFUSED 127.0.0.1:8080
    at ClientRequest.<anonymous> (/home/cjones26/JS/mocha-ref/node_modules/node-fetch/lib/index.js:1461:11)
    at ClientRequest.emit (events.js:314:20)
    at Socket.socketErrorListener (_http_client.js:428:9)
    at Socket.emit (events.js:314:20)
    at emitErrorNT (internal/streams/destroy.js:92:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  type: 'system',
  errno: 'ECONNREFUSED',
  code: 'ECONNREFUSED'
}


  2 passing (59ms)

ℹ [mocha] waiting for changes...

Expected behavior

> mocha-ref@1.0.0 test:watch
> cross-env NODE_ENV=test mocha --timeout 10000 -w src/**/*.test.js



  App tests
    ✓ renders App without crashing
Fetch complete:  {
  msgCode: 0,
  msgDesc: 'Request processed successfully',
  data: {
    data: { createdBy: 'CJ', createdDate: '02/18/2021' },
    pagination: {
      pageNo: 0,
      pageSize: 10,
      total: 1,
      sortedColumn: 'createdBy',
      sortedType: 'asc'
    }
  }
}

  Child tests
    ✓ renders Child without crashing
Fetch complete:  {
  msgCode: 0,
  msgDesc: 'Request processed successfully',
  data: {
    data: { createdBy: 'CJ Child', createdDate: '02/18/2021' },
    pagination: {
      pageNo: 0,
      pageSize: 10,
      total: 1,
      sortedColumn: 'createdBy',
      sortedType: 'asc'
    }
  }
}

  2 passing (59ms)

ℹ [mocha] waiting for changes...

Screenshots

Failed test: