Remix Jest + Testing Library guide is needed

[Denis-NV]

Hi,

I've successfully implemented client and server side validation with Conform and my Remix app. However, I'm struggling to write meaningful test around with Jest and Testing Library. My problem appear to be somewhere around Conform not triggering validation onBlur or on Radio button select. I trued console logging the form.value and no matter what user interaction I simulate with userEvent I can't get the route component, containing the form to re-render. Could you please extend your Remix example with some simple tests, please?

My route component:

export default function AggregatorApplyHandover() {
  const location = useLocation();
  const { brand = '', product = '' } = useParams();
  const { application, csrf, applicationId } = useLoaderData<typeof loader>();

  const lastResult = useActionData<typeof action>();

  const [form, fields] = useForm({
    defaultValue: {
      mobile: application?.mobile,
      email: application?.email,
    },
    // Sync the result of last submission
    lastResult,
    // Reuse the validation logic on the client
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: clientSchema });
    },

    // Validate the form on blur event triggered
    shouldValidate: 'onBlur',
    shouldRevalidate: 'onBlur',
  });


  const clientIsValid = clientSchema.safeParse(form.value).success;

  console.log('>>', form.value);

  return (
    <AuthenticityTokenProvider token={csrf}>
       ...
          <Form method="post" id={form.id} onSubmit={form.onSubmit} noValidate>
            <AuthenticityTokenInput />
        
                  <IndependentInputField
                    id={genericFields.mobile}
                    type="digitOnly"
                    label="Mobile number"
                    maxLength={11}
                    tooltip={mobileTooltip}
                    key={fields.mobile.key}
                    name={fields.mobile.name}
                    defaultValue={fields.mobile.initialValue}
                    error={fields.mobile.errors?.toString()}
                  />

                  <IndependentInputField
                    id={genericFields.email}
                    type="email"
                    label="Email"
                    maxLength={60}
                    minLength={7}
                    tooltip={emailTooltip}
                    key={fields.email.key}
                    name={fields.email.name}
                    defaultValue={fields.email.initialValue}
                    error={fields.email.errors?.toString()}
                  />

                <IndependentRadioButtonField
                  data-testid={genericFields.financialSituation}
                  id={genericFields.financialSituation}
                  label="Do you expect your financial situation to change in the near future which would impact your ability to make your repayments?"
                  isHeading
                  topText="Think about things like ill health, job loss or care for a dependant"
                  options={financialSituations()}
                  key={fields.financialSituation.key}
                  name={fields.financialSituation.name}
                  defaultValue={fields.financialSituation.initialValue ?? ''}
                  error={fields.financialSituation.errors?.toString()}
                />

                <Button
                  data-testid="continue-submit-application"
                  id="submitApplication"
                  type="submit"
                  width="100%"
                  onClick={onClickSubmit}
                  isDisabled={!clientIsValid}
                >
                  Continue my application
                </Button>
          
          </Form>
        ...
    </AuthenticityTokenProvider>

My test:

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { json } from '@remix-run/node';
import { createRemixStub } from '@remix-run/testing';

import AggregatorApplyHandover from './route';
import { aggregatorApplyHandoverAction } from './route.action';
import { ApplicationState } from '~/apis/unifiedApi/application.types';
import { PAGES_ROUTE } from '~/routes/$brand.$channel.$product._pages/helpers/constants';
import { Outlet } from '@remix-run/react';



const sourceCode = '1000472AA000DSE01000';
const applicationId = '1000472AA000DSE01000';

const mockApplication = {
  id: applicationId,
  firstName: 'Luke',
  lastName: 'Skywalker',
  state: ApplicationState.quoteAccept,
  marketingRef: sourceCode,
  email: 'test@mail.com',
  mobile: '77777777777',
  journeyId: 'a43f1141-a7cd-4a6f-943b-3604ed62a7e6',
  journeyType: 'aggregator',
  sourceCode: '3521460AAJLPDSE00150',
};

const App = createRemixStub([
  {
    path: '/',
    id: PAGES_ROUTE,
    loader: () =>
      json({
        journeySteps: ['step1', 'step2'],
      }),
    Component() {
      return <Outlet />;
    },
    children: [
      {
        path: `/:brand/:channel/:product/aggregator-apply-handover`,
        Component: AggregatorApplyHandover,
        loader: () =>
          json({
            applicationId,
            application: mockApplication,
            csrf: 'mockUUID',
          }),
        action: aggregatorApplyHandoverAction,
      },
    ],
  },
]);

describe('AggregatorApplyHandover from', () => {
  

  test('Client side vaidation', async () => {
    const user = userEvent.setup();

    await render(<App initialEntries={['/bip/online/classic/aggregator-apply-handover']} />);

    expect(await screen.findByText('Review your application')).toBeInTheDocument();

    await user.type(screen.getByLabelText('Email'), 'andreadis3@gmail');
    await user.tab();

    await waitFor(() => expect(screen.getByText(/Invalid email address/i)).toBeInTheDocument());

  });
});