Question

我在我的react组件中有一个窗体，该窗体具有2个调用函数的字段，该窗体在单击show button时会屏蔽和取消屏蔽特定字段。基本上，我需要一些有关如何测试功能本身的帮助。

功能：

  togglePasswordMask = e => {
    const { type } = this.state;
    e.preventDefault();
    this.setState(prevState => ({
      passwordIsMasked: !prevState.passwordIsMasked,
      type: type === 'password' ? 'input' : 'password'
    }));
  };

我在我的渲染方法中调用该函数，如下所示：

<div className="input-group mb-3">
  <Field
        type={type}
        className={classNames('form-control', {
       'is-invalid': errors.password && touched.password
     })}
     placeholder="Password (Required)"
     name="password"
   />
   <div className="input-group-append">
   <span className="input-group-text">
   <div
    className={type === 'password' ? 
   'fa fa-eye fa-lg' : 'fa fa-eye-slash fa-lg'}
   onClick={this.togglePasswordMask}
   />
  </span>
 </div>
</div>

它也有一个INITIAL_STATE：

  state = {
    type: 'password',
    groups: []
  };

可以帮我，用Jest和Enzyme编写测试用例。我尝试了以下方法，但它们似乎不起作用：

  describe('UserCreateForm TogglePassword', () => {
    it('Should unmask password and confirmPassword on click', () => {
      const maskElement = wrapper.find('.fa fa-eye fa-lg');
      const maskFn = maskElement.simulate('click');
      expect(maskFn().state()).toEqual('input');
    });
  });

我收到此错误：TypeError: Cannot read property 'preventDefault' of undefined。

找到另一个答案后，我进行了一点迭代，现在我的测试看起来像这样：

    it('Should unmask password and confirmPassword on click', () => {
      console.log(wrapper.debug());
      const maskElement = wrapper.find('.fa-eye');
      const maskFn = maskElement.simulate('click', {
        preventDefault: () => {}
      });
      expect(maskFn().state()).toEqual('input');
    });

现在，我得到另一个错误：maskFn, is not a function。

Answer 1

您的直接问题是因为maskElement.simulate根据Enzyme docs返回了Self，而这是一个对象而不是一个函数。完全摆脱maskFn，调用maskElement.simulate并忽略其返回值，然后对expect运行maskElement.state()。

（此外，不要针对组件的内部状态进行测试-有些人认为这是一种反模式，因为您正在测试组件实现而不是组件行为，请考虑expect对组件进行渲染以生成{{ 1}}与<Field type="password" />）

笑话/酶|测试遮罩/取消遮罩密码功能

1 个答案: