javascript - 如何测试默认的 props 函数是否附加到组件？ | react |开 Jest | enzyme

Question

在这种情况下我们如何编写测试来检查defaultProps函数( handleChange: () => {},handleBlur: () => {},handleSubmit: () => {}) 附加到 dom 并且它们工作正常吗？

我知道当我们作为 props 传递时我们可以测试函数，但正在寻求帮助来测试默认函数。谢谢，

import React from 'react';
import PropTypes from 'prop-types';

const LoginForm = ({
  handleChange,
  handleBlur,
  handleSubmit,
}) => (
  <form onSubmit={handleSubmit}>
    <input
      onChange={handleChange}
      onBlur={handleBlur}
    />
    <input
      onChange={handleChange}
      onBlur={handleBlur}
    />
    <button type="submit">
      Submit
    </button>
  </form>
);

const shape = { email: '', password: '', generic: '' };

LoginForm.propTypes = {
  handleChange: PropTypes.func,
  handleBlur: PropTypes.func,
  handleSubmit: PropTypes.func,
};

LoginForm.defaultProps = {
  handleChange: () => {},
  handleBlur: () => {},
  handleSubmit: () => {},
};

export default LoginForm;

Answer 1

如果您想测试这些函数是否具有预期的行为，您可以将它们作为 LoginForm 上的静态属性进行访问，并围绕它们编写测试。

import LoginForm from 'wherever'

test('should have default handleChange', () => {
   expect(LoginForm.defaultProps.handleChange).toBeDefined();
});

test('something something', () => {
    const result = LoginForm.defaultProps.handleChange();
    expect(result).toBe('something');
});

如果你想测试 React 是否按照它所说的那样执行 - 即，如果没有指定其他 props，它将传递默认 props - 我建议你不要这样做。 React 的创建者 have written tests围绕这个。