Accessing request body properties in life cycle events with TypeScript

[tiborsaas]

Environment

Name	Version
msw	0.28.2
node	14.15.0
OS	OSX

Request handlers

// Example of declaration. Provide your code here.
import { setupServer } from 'msw/node'
import { rest } from 'msw'

const mockPatchChangeEmail = ({
  showGenericError = false,
}: { showGenericError?: boolean } = {}) => {
  return rest.patch<{ emailChangeParams: { email: string } }>(
    `/gateway/v1/email-changes`,

    (req, res, context) => {
      if (showGenericError) {
        return res(
          context.status(400),
          context.json({ errors: [{ code: 'random.code', message: 'Error updating email' }] }),
        );
      }

      return res(
        context.status(200),
        context.json({
          email: '[email protected]',
        }),
      );
    },
  );
};

export const server = setupServer(...[]);

Actual request

type ChangeParams<T extends DefaultRequestBody> = T & {
  body: {
    emailChangeParams: {
      email: string;
    };
  };
};

test('Displays confirm email address screen if email form is successfully submitted', async () => {
  let emailReceived = '';
  server.use(mockCreateChangeEmail());

  server.on('request:start', (req: ChangeParams<any>) => {
    const { email } = req.body.emailChangeParams;
    emailReceived = email;
  });

  render(
    <EnterEmail />,
  );

  await screen.findByText('New email address');

  userEvent.type(screen.getByPlaceholderText('Email address'), '[email protected]');
  userEvent.click(screen.getByRole('button', { name: 'Next' }));

  await waitFor(() => {
    expect(emailReceived).toBe('[email protected]');
  });
});

Current behavior

Accessing req.body.emailChangeParams without ChangeParams yields:

Property 'emailChangeParams' does not exist on type 'string | Record<string, any> | DefaultRequestMultipartBody'.
  Property 'emailChangeParams' does not exist on type 'string'.ts(2339)

Expected behavior

Creating the ChangeParams interface does work, but I'm wondering if it's possible to get rid of the any type and be even more specific.

[tiborsaas]

Sorry, this is not really a bug, but more like a typescript usage question related to this library.

[kettanaito]

Hey, @tiborsaas.

You should annotate your request body in the life-cycle events listener using the MockedRequest interface exported by the library:

import { MockedRequest } from 'msw'

interface MyBody {
 emailChangeParams {
    email: string
  }
}

server.events.on('request:start', (req: MockedRequest<MyBody>) => {
  const { emailChangeParams } = req.body
})

There is no need to extend DefaultRequestBody as the request type and shape are known in your case.

[tiborsaas]

Thanks for the reply, I tried it (and with slight variations too), but unfortunately it doesn't work:

Argument of type '(req: MockedRequest<ChangeParams>) => void' is not assignable to parameter of type '(request: MockedRequest<DefaultRequestBody>) => void'.
  Types of parameters 'req' and 'request' are incompatible.
    Type 'MockedRequest<DefaultRequestBody>' is not assignable to type 'MockedRequest<ChangeParams>'.
      Type 'DefaultRequestBody' is not assignable to type 'ChangeParams'.
        Type 'undefined' is not assignable to type 'ChangeParams'.ts(2345)