Cypress not matching routes in reactjs - reactjs

Question

I've successfully mocked several routes in testing this application. My recent work involved making a GET request on the app's startup.
export const requestSettings = () =>
dispatch => {
console.log('Requesting settings');
const url = urls.SETTINGS_HTTP;
axios.get(url)
.then(res => {
console.log('response from axios');
return dispatch(updateSettingsFromBackend(res.data));
})
.catch((e) => {
console.log('axios error', e, e.config);
return dispatch(reportError('Request for initial settings failed.'));
});
};
In Cypress I mocked this route which allowed all my tests to run (since otherwise they'd fail on the failed HTTP request at the start of each test):
// commands.js
const urls = buildUrls(Cypress.env()); // we don't have the window yet
const settingsHttpUrl = urls.SETTINGS_HTTP;
const initialSettingsForTest = { ...defaultSettingsState, displayProgressIndicator: true };
const initialPayloadForTests = _createSettingsApiPayload(initialSettingsForTest);
Cypress.Commands.add("mockGetSettings", (code: number = 200) =>
cy.route({
method: 'GET',
url: settingsHttpUrl,
status: code,
response: code === 200 ? initialPayloadForTests : {},
}));
Cypress.Commands.add("mockPutSettings", (code: number) =>
cy.route({
method: 'PUT',
url: settingsHttpUrl,
status: code,
response: {},
}));
// the tests
describe('updating settings (requestParameterChange)', () => {
beforeEach(() => {
cy.mockGetSettings(200);
cy.visitSettings();
});
...
This worked fine.
My latest branch involves waiting to make this initial request until a certain websocket message is received. In my cypress tests I am able to dispatch that websocket handler to get the sequence going and ultimately call the same GET endpoint. With my back-end running, I am able to do this in the live app. The implementation is there.
However, in this branch, my mock is just not working! With the back-end up, the functionality works (which means it's hitting the real back-end, not the mock), and with the back-end down, it fails (because the mock isn't being hit).
describe('Settings Page', () => {
beforeEach(() => {
cy.server();
cy.clock();
});
describe('initial state', () => {
beforeEach(() => {
cy.mockGetSettings(200).as('getRequest');
cy.visitSettings();
});
it('starts in a waiting state, with no settings.', () => {
cy.contains('Waiting for settings...');
});
it.only('requests the settings when it receives a FIRMM status message', () => {
const message = { data: JSON.stringify({ status: 10 }) } as MessageEvent;
cy.dispatch(handleStatusMessage(message));
cy.wait('#getRequest');
});
(Note, by the way, the mockPutSettings command earlier in this post, which DOES WORK.)
cy.wait('#getRequest') fails with
CypressError: Timed out retrying: cy.wait() timed out waiting 5000ms for the 1st request to the route: 'getRequest'. No request ever occurred.
Chrome console shows: GET http://localhost:5000/settings/ net::ERR_EMPTY_RESPONSE
In fact, taking the app itself out of the equation also fails:
it('requests the settings when it receives a FIRMM status message', () => {
cy.visit(url);
cy.wait('#getRequest');
});
In the cypress window, we can see that the route is being created/set up, but it doesn't get hit.
What's happening?
PS. axios-mock-adapter DOES work for this:
function mockGet() {
// ... setup of constants as before ...
return new MockAdapter(axios).onGet(settingsHttpUrl).reply(() => {
console.log('MOCK AXIOS HIT');
return [200, initialPayloadForTests];
});
}
describe('Settings Page', () => {
beforeEach(() => {
cy.server();
cy.clock();
mock = mockGet();
});
afterEach(() => {
mock.restore();
});
The tests work, the response comes, MOCK AXIOS HIT prints to the console. However, mock.history.get is empty.