测试按钮是否更改状态，或是否显示组件（反应）

Question

我有一个带有按钮和表单的组件。当按钮可见时，表单被隐藏，而相反-当我们单击按钮时，它消失并显示表单。我想使用酶或测试库对其进行测试，但是我所有的测试均失败。

import React, { useState } from 'react';
import Form from './Form';

const FormComponent = () => {
  const [isFormVisible, setFormVisibility] = useState(false);

  function toggleFormVisibility() {
    setFormVisibility(!isFormVisible);
  }
  return (
    <section>
      {!isFormVisible && (
        <button
          id='toggle-form-button'
          data-testid='toggle-form-button'
          onClick={toggleFormVisibility}
        >
          Show form
        </button>
      )}
    {isFormVisible && <Form onCancel={toggleFormVisibility} />}
    </section>
  );
};

export default FormComponent;

我的测试：

describe('Form component', () => {
  it('should fire toggle form action on button click', () => {
    const setState = jest.fn();
    const useStateSpy = jest.spyOn(React, 'useState');
    useStateSpy.mockImplementation(() => [undefined, setState]);

    const component = render(
      <Form />
    );
    const showFormButton = component.getByTestId('toggle-form-button');
    Simulate.click(showFormButton);
    expect(showFormButton).toBeCalled();
  });
});

和另一个：

  it('should fire toggle form action on button click', () => {
    const toggleFormVisibility = jest.fn();

    const component = render(
      <Form />
    );
    const showFormButton = component.getByTestId('toggle-form-button');
    Simulate.click(showFormButton);
    expect(toggleFormVisibility).toBeCalled();
  });

Answer 1

使测试更容易的方法是将逻辑放在Form中，然后通过prop传递可见性，您的测试将更易于编写

然后您可以使用类似的东西

component.find（'input'）。simulate（'click'）;

然后检查可见性状态>>