Имитация изменения состояния с помощью фермента и React

Question

Я новичок в модульных тестах с React, и я изо всех сил пытаюсь понять, что здесь происходит. Я начал тестировать компонент Login, который содержит два входа.

<Form className="login" onSubmit={this.submitHandler}>
    <Segment>
        <Form.Input id="username" name="username" value={username} type="text" onChange={this.handleChange} />
        <Form.Input id="password" name="password" value={password} type="password" onChange={this.handleChange} />
        <Button color="orange" disabled={loading} size="large">
          Submit
        </Button>
    </Segment>
</Form>

handleChange = (event) => {
  this.setState({
    [event.target.name]: event.target.value,
  });
}

export default withRouter(connect(mapStateFromProps, { setUser })(Login));

и в моем файле Login-test.js я пробовал два разных подхода, которые не работали.

describe('username input', () => {
   it('should respond to change event and change the state of the login container', () => {
      const wrapper = shallow(<Login />);
      wrapper.find('#username').first().value = 'fakeusername';
      expect(wrapper.state('username').toEqual('fakeusername'));
   });
});

и

describe('password input', () => {
    it('should respond to change event and chante state of the login container', () => {
      const wrapper = shallow(<Login />);
      expect(wrapper.find('#password').simulate('change', { target: { name: 'password', value: 'fakepassword' } }));
      expect(wrapper.state('password')).toEqual('fakepassword');
    });
});

Я получаю следующие ошибки:

ShallowWrapper :: state () может быть вызван только для компонентов класса

Метод «имитация» предназначен для запуска на 1 узле. Вместо этого найдено 0.

соответственно

Как мне правильно смоделировать это?

"шутка": "23.6.0", «энзим»: «^ 3.9.0»

Answer 1

Вы можете избавить себя от головной боли и напрямую импортировать компонент Login.

т.е.

export class Login class....

, а затем

import { Login } from './Login'