reduxForm() Connected React Component Unit Test 使用 Jest 和 NO Enzyme

Question

我很难通过 Jest 单元测试。

我有一个 class，它提供了一个密码表单，其中包含以下内容：

// Password.jsx

...

static propTypes = {
  checkPasswordRules: PropTypes.func,
  content: PropTypes.object
};

...

validatePassword(password, allFields) {
  const { confirmPassword = '' } = allFields;

  const errors = this.props.checkPasswordRules({
    password,
    confirmPassword
  });

  return errors.password ? errors.password.friendly : undefined;
}

...

get formContent() {
  ...

  return (
    <Field
       type="password"
       component={this.formField}
       name="password"
       label={content.passwordLabel}
       error={content.errorContent}
       validate={this.validatePassword}
    />
  );
}

...

export default reduxForm({ form: 'passwordForm' })(Password);

这是我的单元测试 (Jest):

// Password.test.js

...

it('handles validatePassword method', () => {
  const allValues = { password: 'password', confirmPassword: 'password1' };
  const labels = content.passwordStrengthRules;
  const expected = labels.confirmMatchLabel;
  const component = renderer.create(
      <Provider store={store}>
        <Password {...props} />
      </Provider>
    );
  const instance = component.getInstance();
  const result = instance.validatePassword(allValues.password, allValues);

  expect(result).toEqual(expected);
});

我遇到的问题是，当我尝试运行 Jest 测试时，我收到一条错误消息，指出 instance.validatePassword 不是控制台中的函数。

我不确定为什么会出现这种情况，因为我使用 react-test-renderer 从单元测试中的 component 变量中获取 instance。上面不是一个函数，因为它正在寻找 Provider 的 instance，这不是我想要做的。但是，在没有 Provider 的情况下 rendering 组件（ 在测试 中）会抛出一个错误，即组件必须包装在 Provider!

有谁知道我哪里错了...？任何帮助将不胜感激，因为我在这里处于合法停顿状态...

提前致谢！！

Answer 1

想通了。因为，在这种情况下，instance 只找到包装/连接的 reduxForm 组件的实例 - Provider - 我无法访问 un-connected 组件的方法 - Password.

通过使用以下内容，我能够访问 Password

的 class 方法

it('handles validatePassword method', () => {

  ...

  const component = renderer.create(
      <Provider store={store}>
        <Password {...props} />
      </Provider>
    );

  ...

  const instance = component.root.findByType(Password).instance;
  instance.validatePassword();
});

如果有人遇到同样的问题，我希望这个答案对他们有用...

reduxForm() Connected React Component Unit Test 使用 Jest 和 NO Enzyme

reduxForm() Connected React Component Unit Test using Jest with NO Enzyme

unit-testing

reactjs

jestjs

redux-form

react-redux