React - 通过按下按钮调用作为 props 传入的测试函数

Question

我正在尝试对调用传递给它的函数的简单组件进行单元测试。

这是一个带有两个按钮的简单页脚组件，cancel/save。

当按下保存时，它应该调用“handleSubmit”属性我已经传递给它但是当我试图开玩笑地测试时，我无法让测试通过。

组件：

function GSFooter({
  handleSubmit,
}) {
  return (
    <Footer>
      <FooterActionsWrap>
        <CancelButton className="update-btn">
          {" "}
          <Link to={"/invoices"}>Cancel</Link>
        </CancelButton>
        <button
          onSubmit={e => handleSubmit(e)}
          className="wp-btn update-btn"
          data-testid="submit-button"
        >
          Save Changes
        </button>
      </FooterActionsWrap>
    </Footer>
  );
}

和测试文件

  let handleSubmitMock = jest.fn();

 test("it should run", () => {

    const {container} = render(<GSFooter
        handleSubmit={handleSubmitMock}
        errors={{}}
      />);

    fireEvent.click(getByTestId(container, 'submit-button'));
    expect(handleSubmitMock).toBeCalled();
  });

输出：

expect(jest.fn()).toBeCalled()

Expected number of calls: >= 1
Received number of calls:    0

  36 |     const submitButton = getByTestId(container, 'submit-button');
  37 |     fireEvent.click(submitButton);
> 38 |     expect(handleSubmitMock).toBeCalled();
     |                              ^
  39 |   })
  40 | });
  41 |

Answer 1

已更新

在与@cw23 讨论后，他发现他使用的是 onSubmit，它仅由 fireEvent.submit 而不是 fireEvent.click 触发！对于面临类似问题的开发人员来说，这是非常有用的信息。

旧答案

你应该直接打电话给getByTestId。 container通常指DOM个元素

test("it should run", () => {

    const { getByTestId } = render(<GSFooter
        handleSubmit={handleSubmitMock}
        errors={{}}
      />);

    fireEvent.click(getByTestId('submit-button'));
    expect(handleSubmitMock).toBeCalled();
  });

React - 通过按下按钮调用作为 props 传入的测试函数

React - Testing function passed in as props is called via button press

reactjs

jestjs