How to test components that are described via arrow functions?

Question

JavaScript

Hello!
The problem is this: I described the component through an arrow function

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

such an example pseudo-code.
and wrote tests for this (TestUtils, Karma, Jasmine), which would check that func1 would be called when the first button was pressed, and func2 would be called on the second.
but already at this point there are problems:

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

I get not React.Component (which is logical, I don't inherit from it), but NULL!!
I can’t understand and find what other ways and tools can be tested ??

Answer 1

I found a solution and it turned out to be simple.
To test such components, you can create a TestWrapper component

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
}

and wrap my "arrow component" in it

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