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'

用酶和反应模拟状态变化

1 个答案: