测试内的更新未包含在 act(...) 错误中

Question

我在用笑话和酶进行测试时遇到问题。当我尝试测试 Formik 输入之一的更改时，我收到此错误，表明测试内的更新未包含在 act(...) 中。我尝试导入 act 并换行模拟更改输入的代码（如下所示），但没有帮助。所以这是我的问题，我应该如何以及在哪里使用此行为来停止在测试中收到此警告？

// SignInModal

const SignInModal = () => {
  const { isLoading } = useSelector((state) => state.auth);
  const { props } = useSelector((state) => state.modals);
  const { submit } = props;

  const signInForm = (
    <React.Fragment>
      <div className={classes.logoContainer}>
        <Logo />
      </div>
      <h3 className={classes.title}>Log in to Friends</h3>
      <div className={classes.formContainer} data-test={'component-sign-in-modal'}>
        <Formik
          initialValues={{ email: '', password: '' }}
          onSubmit={(values) => {
            submit({ ...values });
          }}
        >
          {() => {
            return (
              <Form>
                <div className={classes.inputsContainer}>
                  <MyFormikInput as={Input} required name='email' type='email' placeholder='Email address' className={classes.input} />
                  <MyFormikInput as={Input} required name='password' type='password' placeholder='Password' className={classes.input} />
                </div>
                <Button className={classes.button} isTransparent>
                  Sign in
                </Button>
              </Form>
            );
          }}
        </Formik>
      </div>
    </React.Fragment>
  );

  return <div className={classnames(classes.modal, classes.modalVisible)}>{isLoading ? <Spinner /> : signInForm}</div>;
};

// MyFormikInput

const MyFormikInput = ({ label, ...props }) => {
  const [field] = useField(props);

  return (
    <div className={classnames(classes.container, props.className)}>
      <Field {...field} {...props} />
    </div>
  );
};

export default MyFormikInput;

// Input

const Input = (props) => {
  const { type, name, onChange, value, required, className, disabled, placeholder } = props;
  return (
    <input
      type={type}
      name={name}
      onChange={onChange}
      value={value}
      required={required}
      className={classnames(className, classes.input)}
      disabled={disabled}
      placeholder={placeholder}
      autoComplete='off'
    ></input>
  );
};

export default Input;

// SignInModal.test

import { act } from '@testing-library/react';

let store;

const setup = (initialState) => {
  store = storeFactory(initialState);
  return mount(
    <Provider store={store}>
      <SignInModal />
    </Provider>
  );
};

describe('sign in inputs typing', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = setup();
  });

  afterEach(() => {
    // wrapper.unmount();
  });
  test('changes email input content on change', () => {
    const emailInput = formikFindByInputName(wrapper, 'email');
    act(() => {
      emailInput.simulate('change', { target: { name: 'email', value: '[email protected]' } });
    });
    expect(emailInput.instance().value).toEqual('[email protected]');
  });
});

Answer 1

更新

实际上我找到了一种方法来通过这样做来摆脱这个警告：

test('changes email input content on change', async () => {
    const emailInput = formikFindByInputName(wrapper, 'email');
    await act(async () => {
      await emailInput.simulate('change', { target: { name: 'email', value: '[email protected]' } });
    });
    expect(emailInput.instance().value).toEqual('[email protected]');
  });

但我仍然想问是否有更好的方法来解决我的问题？