Блог

Главная - Вопросы по программированию - как проверить, была ли вызвана функция, которая не передается как реквизит из другого компонента?

как проверить, была ли вызвана функция, которая не передается как реквизит из другого компонента?

#reactjs #testing #jestjs #react-testing-library

#reactjs #тестирование #jestjs #react-testing-library

Вопрос:

Как мне проверить, была ли вызвана функция, которая не передается как реквизит, с помощью jest / RTL?

 function CreateForm() {

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

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

Комментарии:

1. Вы не можете, но и не должны, вместо этого лучше проверить, выполнила ли она то, что должна была делать, что было бы либо вызовом обратного вызова (переданного как prop), вызовом внешней функции, либо изменением способа отображения компонента

2. Что вы submitHandler делаете?

3. @SarunUK я предполагаю, что возвращаю какой-то jsx для отображения?

4. @Teneff я только что немного прочитал, не сможет ли jestSpyOn заглянуть в функции моего кода?

5. Нет, поскольку это переменная внутри функции. И даже если бы это произошло, тест просто добавил бы ложное чувство безопасности 🙂

Ответ №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
  });
});
Метки: , ,