使用Jest和Enzyme模拟“提交”后测试更新的状态

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

const Form = () => {
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleSubmit = () => {
    setIsSubmitted(true);
  };

  return (
    <div>
      <button onClick={handleSubmit}>Submit</button>
      {isSubmitted && <p>Form submitted!</p>}
    </div>
  );
};

export default Form;

// Form.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Form from './Form';

describe('Form component', () => {
  it('should update state to isSubmitted true after submit', () => {
    const wrapper = shallow(<Form />);
    const button = wrapper.find('button');

    // 模拟点击提交按钮
    button.simulate('click');

    // 断言状态是否更新为 true
    expect(wrapper.find('p').text()).toEqual('Form submitted!');
  });
});

// Form.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Form from './Form';

describe('Form component', () => {
  it('should update state to isSubmitted true after submit', async () => {
    const wrapper = shallow(<Form />);
    const button = wrapper.find('button');

    // 模拟点击提交按钮
    button.simulate('click');

    // 等待状态更新
    await new Promise(resolve => setTimeout(resolve, 0));

    // 断言状态是否更新为 true
    expect(wrapper.find('p').text()).toEqual('Form submitted!');
  });
});