错误：未实现：HTMLFormElement.prototype.submit

Question

这是我的测试用例的样子：

const renderCard = ({
  onSubmit = jest.fn(),
}: RenderCardParams = {}) => {
  return render(
        <Card title={title} onSubmit={onSubmit}>
          <Button type="submit">Save</Button>
        </Card>,
  );
}; 

it("should invoke onSubmit when form is submitted", async () => {
      const onSubmit = jest.fn();
      window.HTMLFormElement.prototype.submit = () => {};
      const { getByText } = renderCard({ onSubmit });
      const button = getByText("Save").closest("button");
      if (button) {
        fireEvent.click(button);
      }
      await wait(() => expect(onSubmit).toHaveBeenCalled());
 });

我收到“错误：未实现：HTMLFormElement.prototype.submit”。我尝试了这里提到的解决方案https://github.com/jsdom/jsdom/issues/1937，但没有奏效。我不想消除错误而是正确执行测试。谢谢你。

Answer 1

我有一个类似的问题，通过调用该event.preventDefault()方法解决了。

我认为这需要在您的“onSubmit”函数中调用

const onSubmit = jest.fn(e => e.preventDefault());

编辑：woops 忘了调用它！

Answer 2

我必须模拟onSubmit函数的实现来清除错误，从而防止默认的提交行为。

尝试一下这样的事情：

const onSubmit = jest.fn();


it("should invoke onSubmit when form is submitted", async () => {
      onSubmit.mockImplementation(event => {
        event.preventDefault();
      });

      const { getByText } = renderCard({ onSubmit });
      const button = getByText("Save").closest("button");
      if (button) {
        fireEvent.click(button);
      }
      await wait(() => expect(onSubmit).toHaveBeenCalled());
 });

您可以在此处和此处阅读有关 React 中的 event.preventDefault 的更多信息。

对我有用的其他方法是使用 RTL's fireEvent.submit，尽管您需要获得一个表单元素才能工作。假设您的实现Card以可识别的方式呈现表单getByRole，您也可以尝试如下操作：

fireEvent.submit(screen.getByRole('form'));

这将代替模拟按钮单击，这在您的情况下可能是可以接受的，因为您似乎正在测试表单提交而不是按钮的行为。