Блог

Я пытаюсь написать тест для одного компонента React, который имеет форму Formik. Идея проста, я хочу смоделировать операцию отправки щелчка ввода и проверить, была ли вызвана функция onSubmit. Моя текущая проблема заключается в том, что я не могу найти ввод «Отправить» в своем тесте. Я новичок в ферментах, поэтому не уверен, какую часть я сделал неправильно.

Вот тест, который я написал:

 import React from 'react'; import { cleanup, } from '@testing-library/react'; import LoginScreen from '../LoginScreen/LoginScreen'; import Adapter from 'enzyme-adapter-react-16'; import Enzyme, { shallow } from 'enzyme';  Enzyme.configure({ adapter: new Adapter() }); let component  beforeEach(() =gt; {  component = shallow(lt;LoginScreen.WrappedComponent /gt;) }) afterEach(cleanup);  const props = {  handleLoginFormSubmit: () =gt; { return true }, }  it('renders with default props', () =gt; {  // find input with className: same-buttonServ  component.find(".same-buttonServ").simulate('click')  // });   

В сообщении об ошибке, которое я получил, говорилось, что элемент, который я пытаюсь найти, недоступен:

 Method “simulate” is meant to be run on 1 node. 0 found instead.  

Вот компонент, который я тестирую

 class LoginScreen extends Component {  componentDidMount() {  if (this.props.location?.newSignup) {  displayAlert("newSignUp")  }  if (this.props.location?.newPassword) {  displayAlert("newPassword")  }  if (this.props.username) {  this.props.recordImpression('https://corelant.com/login');  }  }   handleSubmit(values) {  this.props.handleLoginFormSubmit(values, "loginError")  }   render() {  return (  lt;React.Fragmentgt;  lt;section className='authSec'gt;  lt;div className='container'gt;  lt;div className='text-center'gt;  lt;div className='blackHeadAuth'gt;Loginlt;/divgt;  lt;/divgt;  lt;div className='row'gt;  lt;div className='col-md-3'gt;lt;/divgt;  lt;div className='col-md-6'gt;  lt;div className='form'gt;  lt;Formik  initialValues={{  username: "",  password: ""  }}  onSubmit={(values) =gt; {  this.handleSubmit(values);  }}  validationSchema={Yup.object().shape({  username: Yup.string().required("*Username is required."),  password: Yup.string().required("*Password is required.")  })}gt;  {() =gt; (  lt;Formgt;  lt;div className='form-group'gt;  lt;Field type="text" name="username" aria-label="username" className="form-control" placeholder='Username' /gt;  lt;ErrorMessage name="username"gt;  {msg =gt; lt;div style={{ color: 'red' }}gt;{msg}lt;/divgt;}  lt;/ErrorMessagegt;  lt;/divgt;   lt;div className='form-group'gt;  lt;Field type="password" name="password" aria-label="password" className="form-control" placeholder='Password' /gt;  lt;ErrorMessage name="password"gt;  {msg =gt; lt;div style={{ color: 'red' }}gt;{msg}lt;/divgt;}  lt;/ErrorMessagegt;  lt;/divgt;    lt;div className='text-center'gt;  lt;input type="submit" aria-label="submit" className='same-buttonServ' value="LOGIN" /gt;  lt;/divgt;  lt;/Formgt;)  }  lt;/Formikgt;  lt;/divgt;  lt;/divgt;  lt;div className='col-md-3'gt;lt;/divgt;   lt;/divgt;   lt;/divgt;  lt;/sectiongt;  lt;/React.Fragmentgt;  );  } }  export default withRouter(LoginScreen);