Как проверить, что функции по умолчанию привязаны к компоненту или нет?|Реагировать |Шут |энзим

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

Вы можете получить доступ к реквизиту, используя 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')
 }

const defaultProps должно дать вам

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

Answer 2

Надеюсь, это поможет.

Ответ, отправленный @ Daniel Varela , хорош, но может быть более ясным.Вот как я решил эту проблему.

Я использовал только то, что он предложил mount и .props, но разница в том, что я хотел проверить, были ли ранее определены некоторые свойства и функции.

// React & Libraries
import React from 'react';    
import { expect } from 'chai';
import { mount } from 'enzyme';
// Features
import ModalConfirmation from './modalConfirmation';

describe('ModalConfirmation', () => {

const wrapper = mount(<ModalConfirmation />);

it('should have default props', () => {
    const props = wrapper.props();
    expect(props).not.be.equal(null);
    expect(props.data).to.deep.equal({});
    expect(props.onCancel).to.not.throw();
    expect(props.onConfirm).to.not.throw();
    expect(props.cancelButtonText.length).be.greaterThan(0);
    expect(props.confirmButtonText.length).be.greaterThan(0);
    expect(props.confirmationMessage).be.equal(null);
});

});

Answer 3

Если вы хотите проверить, что функции имеют ожидаемое поведение, вы можете получить к ним доступ как к статическим свойствам в 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делает то, что говорит - то есть пропускает реквизиты по умолчанию, если другие реквизиты не указаны - я рекомендую этого не делать.Создатели реакции написали тесты вокруг этого.