How to test button is disabled when submitting with Jest.

[mymactive]

Hi!

This library is very nice to me.
Thank you for developing.

I want to test behavior submitting.
In particular, I want to test submit button is disabled when submitting.
I make the following form and test:

Form Component

import { zodResolver } from '@hookform/resolvers/zod';
import { type FC } from 'react';
import { useForm, type SubmitHandler } from 'react-hook-form';
import { z } from 'zod';

const schema = z.object({
  name: z.string(),
});

type Schema = z.infer<typeof schema>;

type Props = {
  onValid: SubmitHandler<Schema>;
};

export const Form: FC<Props> = ({ onValid }) => {
  const {
    register,
    handleSubmit,
    formState: { isSubmitting },
  } = useForm<Schema>({
    mode: 'onChange',
    defaultValues: { name: 'Ben' },
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(onValid)}>
      <label>
        <span>Name</span>
        <input {...register('name')} />
      </label>
      <button disabled={isSubmitting}>submit</button>
    </form>
  );
};

Test

import { render, screen, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';

import { Form } from './Form';

test('Submit button is disabled when submitting', async () => {
  const user = userEvent.setup();

  const onValid = () => {
    expect(screen.getByRole('button', { name: /submit/ })).toBeDisabled();
  };

  render(<Form onValid={onValid} />);

  await act(async () => {
    await user.click(screen.getByRole('button', { name: /submit/ }));
  });
});

This test is failed and accept the following:

  ● Submit button is disabled when submitting

    expect(element).toBeDisabled()

    Received element is not disabled:
      <button />

I hope this hints at solving the problem.
Please, think a bout the problem with me.

My version
react-hook-form: 7.3.2
Jest: 28.1.1
testing-library-react: 13.3.0
testing-library/user-event: 14.4.3

[mymactive]

It is solved!

test('should be disabled when submitting, but should not  be disabled when submitted', async () => {
  const user = userEvent.setup();
  let resolve: (v: unknown) => void;

  const mockOnSubmit = jest.fn().mockReturnValue(
      new Promise((_resolve) => {
        resolve = _resolve;
      })
    );

  render(
    <Form
      title="フォーム"
      onSubmit={mockOnSubmit}
      defaultValues={defaultValuesPassingValidations}
    />
  );

  await act(async () => {
    await user.click(screen.getByRole('button', { name: /submit/ }))   
  });

  expect(screen.getByRole('button', { name: /submit/ })).toBeDisabled();

  await act(async () => {
    resolve(jest.fn)
  });

  expect(screen.getByRole('button', { name: /submit/ })).not.toBeDisabled();
  });
});

This key is in secrets of the act(...) api

[vqc1909a]

Interesting, thanks for your resolve, it work for me