Тестирование обязательных PropTypes передано в Redux HOC - PullRequest
Новая
       49

Тестирование обязательных PropTypes передано в Redux HOC

0 голосов
/ 13 ноября 2018

Я хотел бы написать тест, который гарантирует, что реактивный компонент передает реквизит, имеющий propType.isRequired, дочернему компоненту.

Я бы хотел, чтобы этот тест провалился, если реквизит не предоставлен, и прошел, если он есть. Я использую jest-prop-type-error, чтобы выдавать ошибки в моих тестах.

Учитывая следующие два компонента:

Parent.js 

const Parent = ({ renderReduxChild , childTitle }) => 
    { return renderReduxChild ? <ReduxChild title={childTitle} /> : <NonReduxChild />}

ReduxChild.js 

const ReduxChild = ({ title }) => <div>{title}</div>

ReduxChild.propTypes = { title: PropTypes.string.isRequired }

export default connect(mapStateToProps, mapStateToProps)(ReduxChild)

Я хотел бы убедиться, что мой Parent компонент проходит childTitle проп, без необходимости писать явный тест, который говорит:

Parent.test.js 

it('should send the required "title" prop to ReduxChild', () => {
  const wrapper = shallow(<Parent renderReduxChild={true} childTitle={'expectedTitle'} />)
  expect(wrapper.props().title).toBeDefined()
})

Обратите внимание на следующее:

  • Если child не был connect ed компонентом, я мог бы not передать childTitle на Parent, и тест не прошел бы. Поскольку это подключенный компонент, если я не пройду childTitle, тест пройден (даже если это требуется в ReduxChild)
  • Я знаю, что это довольно близко к тестированию функциональности PropTypes, но оно немного отличается тем, что я хочу проверить, что Parent использует Child правильно, а не что ReduxChild выдает PropTypes ошибка, когда реквизит не пройден. Я хочу, чтобы тест не прошел во время сборки, когда разработчик удаляет необходимую пропелу, а не во время выполнения, когда я выполняю код.

EDIT:

Чтобы дополнительно проиллюстрировать проблему, если у меня есть второй дочерний компонент NonReduxChild, и я дам ему propType, что isRequired, и у меня есть тест для Parent, который отображает NonReduxChild без предоставления поддержки, которую я получаю ошибка, генерируемая во время сборки / тестирования. Wheres с ReduxChild я не.

NonReduxChild.js 

const NonReduxChild = ({ text }) = <div>{text}</div>
NonReduxChild.propTypes = { text: PropTypes.string.isRequired }

Тестовый вывод 

FAIL  test/components/Parent.test.js (8.782s)

● <Parent /> › when rendering the component › if renderReduxChild is false it should render <NonReduxChild />

Warning: Failed prop type: The prop `title` is marked as required in `NonReduxChild`, but its value is `undefined`.
    in NonReduxChild

  28 |   render() {
  29 |     const { renderReduxChild, childTitle } = this.state
> 30 |     return renderReduxChild ? <ReduxChild title={childTitle } /> : <NonReduxChild />
     |                                                                                                                                                                                                ^
  31 |   }
  32 | }
  33 |

Как вы можете видеть из результатов теста, когда я не предоставляю необходимую реквизит для NonReduxChild, я получаю тестовый сбой, который приятно отражает использование NonReduxChild от других компонентов, которые могут не обеспечивать требуемый PropTypes Я не получаю такой же сбой от ReduxChild Мне нужно написать конкретный тест (который я не хочу делать на базе кода с сотнями компонентов).

Ответы [ 2 ]

0 голосов
/ 23 ноября 2018

Я думаю, вы можете определить title как prop, и вы могли бы назвать его вместо "childTitle".Попробуйте это .. это может работать 

it('should send the required "title" prop to ReduxChild', () => {
`var wrapper = shallow(<Parent renderReduxChild={true} title={"expectedTitle"} />);`
  expect(wrapper.props().title).toBeDefined()
  `console.log("",childTitle);`
})
0 голосов
/ 16 ноября 2018

Я считаю, что проблема, с которой вы сталкиваетесь, заключается в том, что PropTypes просто регистрирует предупреждения, которые на самом деле не приводят к сбою тестов.

Если реквизит критически важен для работы компонента, и вы настроены не писать тесты, чтобы утверждать, что реквизиты присутствуют, вы всегда можете заставить компонент выдать ошибку, если этого реквизита нет.Это приведет к сбою тестов.

...