Мокинг дочернего компонента с библиотекой тестирования реакции и запускающими функциями

Question

Итак, я хочу протестировать метод handleUpdate на компоненте контейнера. В этом компоненте контейнера есть компонент формы.

. / MyContainer.jsx

const MyContainer = ({ handleUpdate }) => (
  <MyForm onSubmit={handleUpdate} />
);

. / MyForm.jsx

const MyForm = ({ onSubmit }) => {
  const [error, setError] = useState();
  const [nameValue, setNameValue] = useState();

  handleChange(event) {
    setNameValue(event.target.value);
  }
  
  handleSubmit(event) {
    event.preventDefault();
    if (!nameValue) { setError("Name is required"); }
    onSubmit(nameValue);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="nameInput">Name: </label>
      <input type="text" name="name" onChange={handleChange} id="nameInput" />
      {error && <p>{error}</p>}
      <button name="save button" type="submit">Submit</button>
    </form>
  );
};

Этот компонент формы тестируется индивидуально на предмет взаимодействия с ним пользователя:

. / MyForm.test. js

const mockSubmit = jest.fn();
function setup() {
  render(<MyForm onSubmit={mockSubmit} />);
}

it('has a required field', () => {
  setup();

  userEvent.click(screen.getByRole('button', { name: 'save button' }));

  expect(screen.getByText('Name is required.'));
});

it('saves', () => {
  setup();

  // make sure name has a value
  userEvent.type(screen.getByLabelText(/^name$/i), 'John');

  userEvent.click(screen.getByRole('button', { name: 'save button' }));
  expect(mockSubmit).toHaveBeenCalled();
});

Теперь я хочу проверить, когда компонент формы запускает отправку, в компоненте контейнера запускается handleUpdate. Но я не хочу устанавливать входное значение et c. чтобы иметь возможность сохранить форму:

. / MyContainer.test. js

const mockUpdate = jest.fn();
function setup() {
  render(<MyContainer handleUpdate={mockUpdate} />);
}

it('handles an update', () => {
  setup();

  // problem is here
  //
  // the input name is already tested in ./MyForm.test.js
  // so I don't want to have to do this again...
  userEvent.type(screen.getByLabelText(/^name$/i'), 'John');

  userEvent.click(screen.getByRole('button', { name: 'save button' }));

  expect(mockUpdate).toHaveBeenCalled();
});

Итак, в идеале я хочу издеваться над компонентом MyForm и запускать вручную onSubmit в моем тесте.

Как бы вы go об этом?

Пробуя следующее:

Я думал в строках с использованием jest.mock('./MyForm.test.js'):

jest.mock('./MyForm.js', () => () => {
  return <p>test</p>;
});

const mockUpdate = jest.fn();
function setup() {
  render(<MyContainer handleUpdate={mockUpdate} />);
}

it('handles an update', () => {
  setup();

  screen.debug(); // <- this shows that MyForm is now replaced with "<p>test</p>"
  // how to trigger the handleUpdate from this?

  userEvent.click(screen.getByRole('button', { name: 'save button' }));

  expect(mockUpdate).toHaveBeenCalled();
});

Но как я могу с его помощью вызвать handleUpdate?