0

I want MSW to break the test case when an request is not mocked. I've tried to modify onUnhandledRequest but with no success.

Component:

import React, { useState } from 'react';
import Child from './Child';

const ExampleComponent: React.FC = () => {
    const [data, setData] = useState(null);
    fetch('http://example.com/movies.json')
        .then((response) => response.json())
        .then((d) => setData(d));

    return (
        <>
            <h1>This is a header</h1>
            <Child data={data} />
        </>
    );
};

export default ExampleComponent;

and test case:

import * as React from 'react';
import { render } from '@testing-library/react';
import ExampleComponent from './ExampleComponent';

describe('ExampleComponent', () => {
    test('should render error message', () => {
        const { getByText } = render(<ExampleComponent />);

        expect(getByText('This is a header')).toBeInTheDocument();
    });
});

This will result in a unhandled request in the MSW mock server:

beforeAll(() => {
    server.listen({
        onUnhandledRequest(req) {
            // eslint-disable-next-line no-console
            console.error(
                'Found an unhandled %s request, with query %s query %s and variables %s',
                req.method,
                req.url.href,
                req.body?.query,
                req.body?.variables,
            );
        },
    });
});
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Message:

  console.error
    Found an unhandled GET request, with query http://example.com/movies.json query undefined and variables undefined

      44 |         onUnhandledRequest(req) {
      45 |             // eslint-disable-next-line no-console
    > 46 |             console.error(
         |                     ^
      47 |                 'Found an unhandled %s request, with query %s query %s and variables %s',
      48 |                 req.method,
      49 |                 req.url.href,

      at onUnhandledRequest (src/setupTests.tsx:46:21)
      at onUnhandledRequest (../node_modules/msw/src/utils/request/onUnhandledRequest.ts:226:5)
      at handleRequest (../node_modules/msw/src/utils/handleRequest.ts:80:5)
      at ../node_modules/msw/src/node/SetupServerApi.ts:69:24

Wanted behavior is a fail of the test case if one misses to add a mock for the request. I want this since the project is large and I've seen some developers missing to add mock for all requests.

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Jedi Schmedi
  • 746
  • 10
  • 36
  • Do you mean you want to _fail_ the test? Using the console won't throw an error, but `onUnhandledRequest: "error"` should. Please give a [mre]. – jonrsharpe Mar 15 '23 at 12:40
  • I want to fail the jest case where the unmocked request is fired from. Main problem is developer missing to mock the request since it dosent fail the test only writes a small message in the log. – Jedi Schmedi Mar 15 '23 at 12:42
  • It's not clear what you're testing? Is whatever's making the request actually exposed to the test, so the framework can catch that error? Again, _give a MRE_. – jonrsharpe Mar 15 '23 at 13:09
  • better? :D I've added an example – Jedi Schmedi Mar 15 '23 at 14:42
  • That's the thing that _won't_ work. `console.error` doesn't _throw_ an error, just _logs_ it. What did it do with the thing that _should_? – jonrsharpe Mar 15 '23 at 14:54
  • I know console.error just "logs". I want it to fail instead. Like having an `expext(false).toBe(true)` inside the `onUnhandledRequest` (know that this is not possible but it would give correct behavior that Im after) – Jedi Schmedi Mar 15 '23 at 15:28
  • 1
    Again `onUnhandledRequest: "error"` _will_ throw an error. However in this case the error doesn't get back to the test framework, because it's not returned to it. What's the _user-visible result_ of that request failing, that your test could `waitFor`? _That's_ what should fail the test. – jonrsharpe Mar 15 '23 at 15:37

0 Answers0