用酶模拟状态变化并反应

Question

我是与React的单位测试的新手，我正在努力了解这里发生了什么。我开始测试一个登录组件，其中包含两个输入。

<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));

，在我的登录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找到。

分别

如何正确模拟它？

jest"：23.6.0"酶"：＆quot"^3.9.0'

Answer 1

您可以节省自己的头痛并直接导入登录组件。

即。

export class Login class....

，然后

import { Login } from './Login'