msw: POST is not intercepted in a dockerised enviroment that uses a network bridge

Environment

docker on windows running linux containers docker version

Client: Docker Engine - Community
 Cloud integration: 1.0.1
 Version:           19.03.13
 API version:       1.40
 Go version:        go1.13.15
 Git commit:        4484c46d9d
 Built:             Wed Sep 16 17:00:27 2020
 OS/Arch:           windows/amd64
 Experimental:      false
Server: Docker Engine - Community
 Engine:
  Version:          19.03.13
  API version:      1.40 (minimum version 1.12)
  Go version:       go1.13.15
  Git commit:       4484c46d9d
  Built:            Wed Sep 16 17:07:04 2020
  OS/Arch:          linux/amd64
  Experimental:     false
 containerd:
  Version:          v1.3.7
  GitCommit:        8fba4e9a7d01810a393d5d25a3621dc101981175
 runc:
  Version:          1.0.0-rc10
  GitCommit:        dc9208a3303feef5b3839f4323d9beb36df0a9dd
 docker-init:
  Version:          0.18.0
  GitCommit:        fec3683

Request handlers

import React from 'react';
import ReactDOM from 'react-dom';
import './css/index.css';
import App from './components/App';
import { CookiesProvider } from 'react-cookie';
import { MockedRequest } from 'msw';

async function render() {
    if (process.env.REACT_APP_MOCKED) {
        document.cookie = 'JSESSIONID=GSGJSGJSHGSH';
        document.cookie = 'name="Blueberry Developer"';
        // eslint-disable-next-line
        const { worker } = require("./mocks/browser");
        await worker.start({
            waitUntilReady: true,
            serviceWorker: {
                url: `${process.env.PUBLIC_URL}/mockServiceWorker.js`,
            },
            onUnhandledRequest: (req: MockedRequest) => {
                console.error('Found an unhandled %s request to %s', req.method, req.url.href);
            },
        });
    }

    ReactDOM.render(
        <CookiesProvider>
            <React.StrictMode>
                <App />
            </React.StrictMode>
        </CookiesProvider>,
        document.getElementById('root'),
    );
}

render();

Actual request

    function createGitHubRepo(payload: ICreateRepo): void {
        fetch(`${backEndHost}/api/v1/repos/create`, {
            method: 'POST',
            mode: 'cors',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ name: payload.repoName, description: payload.description }),
        })
            .then(async (res) => {
                if (res.status === 201) {
                    const r = await res.json();
                    setState({ success: true, error: false, body: r });
                } else if ([400, 415].includes(res.status)) {
                    setState({ success: false, error: true, body: { clone_url: '', url: '' } });
                } else if (res.status === 500) {
                    setState({ success: false, error: true, body: { clone_url: '', url: '' } });
                }
            })
            .catch((err) => {
                throw new Error(err);
            });
    }

Current behavior

Architecture: I have my react App running on docker fully mocked via MSW. Command run docker run -it --rm --network app --name catalogue -p 3001:3001 -v "C:\Projects\step-enablement-catalogue\web":/workspace–bind 0.0.0.0 -w /workspace–entrypoint “npm” node:lts run mock

I run my playwright tests within a docker container with the following command: docker run -it --network app --rm --name playwright -v "C:\Projects\step-enablement-catalogue\web\e2e_tests":/workspace -e TEST_URL=http://catalogue:3001 -w /workspace --entrypoint “npm” mcr.microsoft.com/playwright run test-pipeline

The two containers see each other via a network bridge named “app” (command: docker network create --driver bridge app )

What is happening?

Scenarios executed:

1. App running on my computer (win 10), Tests executed via my computer —> all tests pass including those that fires POST requests (MSW responds well)
2. App running on docker container, Tests executed via my computer —> all tests pass including those that fires POST requests (MSW responds well)
3. App running on docker container, Tests executed within a different container —> Not all tests pass, the one that fires POST request are not triggering an MSW response

Expected behavior

Test should pass even in the third scenario an MSW should respond to POST even within a container

Screenshots

Screenshots for first and second scenarios:

Unfortunately as the dockerised version runs headless I can only provide console logs captured from playwright code and a screenshot captured from playwright tests. As you can see the Test has clicked on the “Submit” button and from logs you can see that request POST has been fired properly but MSW doesn’t seem to be responding.

output.txt

As you can see the POST goes to 404 ` console.log POST http://catalogue:3001/api/v1/repos/create {“user-agent”:“Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/88.0.4324.0 Safari/537.36”,“content-type”:“application/json”,“accept”:“/”,“origin”:“http://catalogue:3001”,“referer”:“http://catalogue:3001/step-enablement-github-service",“cookie”:"JSESSIONID=GSGJSGJSHGSH; name="Blueberry Developer"”}   at utils/commonUtils.ts:34:17

 console.log 404 http://catalogue:3001/api/v1/repos/create`