Как тестировать компоненты, которые описаны через arrow functions?

Question

[uuushka]

Всем привет!
Проблема такая: описал компоненту через стрелочную функцию

const Form = (props) => {
<div>
  <Button onClick={() => func1}>Компонента Кнопка 1</Button>
  <Button onClick={() => func2}>Компонента Кнопка 2</Button>
</div>
}

такой примерный псевдокод.

и написал на это дело тесты (TestUtils, Karma, Jasmine), которые проверяли бы, что при нажатии на первую кнопку вызывалась бы func1, а на вторую func2.

но уже на этом месте проблемы:

const instance = TestUtils.renderIntoDocument(<Form />);

Я получаю не React.Component (что логично, я же не наследуюсь от него), а NULL!!
Не могу понять и найти, какими другими способами и инструментами можно протестировать??

Comments

[Andrew]

Попробуйте просто заимпортить React перед объявлением ф-ции Form.

[uuushka]

Andrew: импорт реакта есть как в компоненте, так и в тесте..

[Andrew]

и еще укажите явно return

[uuushka]

Andrew: это тоже не помогло. Кстати, если в тесте наприсать так const instance = TestUtils.renderIntoDocument() , то получу уже развернутый в html компонент, но не Component...

Answer 1

[uuushka]

Нашел решение и оно оказалось простым.

Для тестирования таких компонент можно создать компонент TestWrapper

import React, {Component, PropTypes} from 'react';

export default class TestWrapper extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return React.Children.only(this.props.children);
  }
}

TestWrapper.propTypes = {
  children: PropTypes.node.isRequired
}

и оборачивать в него мой "стрелочный компонент"

const instance = TestUtils.renderIntoDocument(<TestWrapper><Form /></TestWrapper>);