如何测试默认的props功能是否附加到组件上？| 反应| 开玩笑 酵素

Question

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

我知道当我们通过道具时可以测试功能，但正在寻求帮助以测试默认功能。谢谢，

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的创建者对此进行了书面测试。

Answer 2

您可以使用mount和.props()从酶访问道具。

import LoginForm from '../somelocation'
import { mount } from 'enzyme'

it('should handleChange when value 'foo' is passed', () => {
   const props = mount(<LoginForm />).props()
   const handleChange = props.handleChange
   expect(handleChange('foo')).to.equal('bar')
 }

constdefaultProps应该给你

props = {
   handleChange: () => {},
   handleBlur: () => {},
   handleSubmit: () => {}
}