如何测试是否调用了一个函数，该函数未作为 props 从另一个组件传递？

Question

如何测试未作为 props 传递的函数是否已使用 jest/RTL 调用？

function CreateForm() {

  const submitHandler = () => {
    //do something
  }

  return(
    <button onClick={submitHandler}/>
  )
}

Answer 1

试试这个方法，

假设提交处理程序正在更新如下状态，

import React, { useState } from "react";

function CreateForm() {

  const [isSubmit, setSubmit] = useState(false);

  const submitHandler = () => {
    setSubmit(true);
  }

  return (
    <div>
      <span class='status'>{isSubmit ? 'Submitted' : 'Not Submitted'}</span>
      <button id="submit-btn" onClick={submitHandler} />
    </div>
  );
}

export default CreateForm;

检查submission前后的状态值。

测试文件:-

import { fireEvent, render } from "@testing-library/react";
import React from "react";
import CreateForm from "./form";

describe("Create Form  Component", () => {

  it("should update the state on click of submit button", () => {
    const {container} = render(<CreateForm />);

    const status = container.querySelector('.status');
    expect(status.textContent).toEqual('Not Submitted'); //Before Submission

    const button = container.querySelector('#submit-btn'); 
    fireEvent.click(button); //Submit button click

    expect(status.textContent).toEqual('Submitted'); //After Submission
  });
});

如何测试是否调用了一个函数，该函数未作为 props 从另一个组件传递？

how to test if a function has been called that isn't passed as props from another component?

testing

reactjs

jestjs

react-testing-library