Модульное тестирование пользовательского компонента Input React, который будет использоваться с ошибками в формате redux - PullRequest
Новая
       12

Модульное тестирование пользовательского компонента Input React, который будет использоваться с ошибками в формате redux

0 голосов
/ 04 мая 2018

Мне тяжело тестировать пользовательский элемент ввода React.

Я реализовал многократно используемый Input React Component, который будет использоваться как внутри ReduxForm, так и снаружи. Это выглядит следующим образом: 

<!-- Unit Test -->       
import React from 'react';
import ReactDOM from 'react-dom';
import { shallow, mount } from 'enzyme';
import 'jest-enzyme';
import InputField from '../InputField';
import { Field, reduxForm } from 'redux-form';


describe('InputField tests', () => {
   // MyForm.js
   function MyForm (props) {
    return (
      <form>
        <Field label="firstName" name="firstName" placeholder="test" component={InputField}/>
      </form>
   );
 }

 var testForm = reduxForm({form: 'test'})(MyForm);

  test('InputField used as a Field on the redux-form', () => {
     let formFieldFixture = mount(<testForm />);
     // let formFieldFixture = shallow(<Field label="firstName" name="firstName" placeholder="test" component={InputField} withRef/>);
     let fieldElem = formFieldFixture.find('label');
     expect(labelElem.text()).toEqual('firstName');
  });

});

<!-- InputField.js --> 
/**
 * InputField is a generic React component to be used for html input field both in the redux-form and otherwise.
 */
import React, { Component, PropTypes } from 'react';


const InputField = ({ name, input, label, placeholder, value, readOnly, meta }) => {
  const { touched, error, warning, dirty } = meta ? meta : {};
  let inputClasses = `text-input input--regular ${(touched && error) ? 'validation-error' : ((touched && warning) ? 'validation-warning' : '')}`;
  return (<div>
    <label htmlFor={name}>{label}</label>
    {(readOnly) ? <input type="text" value={value} className={inputClasses} placeholder={placeholder} readOnly /> :
      <input {...input} type="text" className={inputClasses} placeholder={placeholder} />}
    {touched &&
      ((error && <div className="validation-error">{error}</div>) ||
        (warning && <div className="validation-error">{warning}</div>))}
  </div>);
};

export default InputField;

Ошибка на линии 

  expect(labelElem.text()).toEqual('firstName'); with error

ReferenceError: labelElem не определен.

Что мне не хватает? или делать неправильно.

...