How to use the inferno.createFragment function in inferno

it('Should be possible to move component with fragment root', () => {
      const fragmentA = createFragment([createElement('div', { id: 'a1' }, 'A1'), createElement('div', null, 'A2')], ChildFlags.HasNonKeyedChildren, 'A');
      const fragmentB = createFragment([createElement('div', { id: 'b1' }, 'B1')], ChildFlags.HasNonKeyedChildren, 'B');
      const fragmentC = createFragment(
        [createElement('div', { id: 'c1' }, 'C1'), createElement('div', null, 'C2'), createElement('div', null, 'C3')],
        ChildFlags.HasNonKeyedChildren,
        'C'
      );

      const content = [fragmentC];

      function SFC() {
        return createElement(Fragment, null, createElement('span', null, '1'), createElement(Fragment, null, content), createElement('span', null, '2'));
      }

      render(createElement(Fragment, null, fragmentA, createElement(SFC, { key: 'sfc' }), fragmentB, fragmentC), container);

      const FragmentAHtml = '<div id="a1">A1</div><div>A2</div>';

it('Should render fragment', () => {
        const fragmentA = createFragment([<div id="a1">A1</div>, <div>A2</div>], ChildFlags.HasNonKeyedChildren, 'A');

        const fragmentB = createFragment([<div id="b1">B1</div>], ChildFlags.HasNonKeyedChildren, 'B');

        const fragmentC = createFragment([<div id="c1">C1</div>, <div>C2</div>, <div>C3</div>], ChildFlags.HasNonKeyedChildren, 'C');

        expect(
          renderToSnapshot(
            <div>
              {fragmentA}
              {fragmentB}
              {fragmentC}
            </div>
          )
        ).toMatchSnapshot();
      });

it('Should render fragment', () => {
        const fragmentA = createFragment([<div id="a1">A1</div>, <div>A2</div>], ChildFlags.HasNonKeyedChildren, 'A');

        const fragmentB = createFragment([<div id="b1">B1</div>], ChildFlags.HasNonKeyedChildren, 'B');

        const fragmentC = createFragment([<div id="c1">C1</div>, <div>C2</div>, <div>C3</div>], ChildFlags.HasNonKeyedChildren, 'C');

        expect(
          renderToSnapshot(
            <div>
              {fragmentA}
              {fragmentB}
              {fragmentC}
            </div>
          )
        ).toMatchSnapshot();
      });

it('Should be possible to move component with fragment root #2', () => {
      const fragmentA = createFragment([createElement('div', { id: 'a1' }, 'A1'), createElement('div', null, 'A2')], ChildFlags.HasNonKeyedChildren, 'A');
      const fragmentB = createFragment([createElement('div', { id: 'b1' }, 'B1')], ChildFlags.HasNonKeyedChildren, 'B');
      const fragmentC = createFragment(
        [createElement('div', { id: 'c1' }, 'C1'), createElement('div', null, 'C2'), createElement('div', null, 'C3')],
        ChildFlags.HasNonKeyedChildren,
        'C'
      );

      const content = [fragmentC];

      function SFC() {
        return createElement(Fragment, null, createElement('span', null, '1'), createElement(Fragment, null, content), createElement('span', null, '2'));
      }

      render(
        createElement(
          Fragment,

it('Should clone fragment children if they are passed as reference', () => {
      const fragmentA = createFragment([createElement('div', { id: 'a1' }, 'A1'), createElement('div', null, 'A2')], ChildFlags.HasNonKeyedChildren, 'A');
      const fragmentB = createFragment([createElement('div', { id: 'b1' }, 'B1')], ChildFlags.HasNonKeyedChildren, 'B');
      const fragmentC = createFragment(
        [createElement('div', { id: 'c1' }, 'C1'), createElement('div', null, 'C2'), createElement('div', null, 'C3')],
        ChildFlags.HasNonKeyedChildren,
        'C'
      );

      const content = [fragmentC];

      function SFC() {
        return createElement(Fragment, null, createElement('span', null, '1'), createElement(Fragment, null, content), createElement('span', null, '2'));
      }

      render(createElement(Fragment, null, fragmentA, createElement(SFC, { key: 'sfc' }), fragmentB, fragmentC), container);

      const FragmentAHtml = '<div id="a1">A1</div><div>A2</div>';
      const FragmentBHtml = '<div id="b1">B1</div>';
      const FragmentCHtml = '<div id="c1">C1</div><div>C2</div><div>C3</div>';

it('Should be possible to move component with fragment root', () => {
      const fragmentA = createFragment([createElement('div', { id: 'a1' }, 'A1'), createElement('div', null, 'A2')], ChildFlags.HasNonKeyedChildren, 'A');
      const fragmentB = createFragment([createElement('div', { id: 'b1' }, 'B1')], ChildFlags.HasNonKeyedChildren, 'B');
      const fragmentC = createFragment(
        [createElement('div', { id: 'c1' }, 'C1'), createElement('div', null, 'C2'), createElement('div', null, 'C3')],
        ChildFlags.HasNonKeyedChildren,
        'C'
      );

      const content = [fragmentC];

      function SFC() {
        return createElement(Fragment, null, createElement('span', null, '1'), createElement(Fragment, null, content), createElement('span', null, '2'));
      }

      render(createElement(Fragment, null, fragmentA, createElement(SFC, { key: 'sfc' }), fragmentB, fragmentC), container);

      const FragmentAHtml = '<div id="a1">A1</div><div>A2</div>';
      const FragmentBHtml = '<div id="b1">B1</div>';

      const fragmentB = () => createFragment([createElement('div', { id: 'b1' }, 'B1')], ChildFlags.HasNonKeyedChildren, 'B');

render() {
          return createFragment([<div id="m">More</div>, 'Fragments'], ChildFlags.UnknownChildren);
        }
      }

        const fragmentA = () =&gt; createFragment([<div id="a1">A1</div>, <div>A2</div>], ChildFlags.HasNonKeyedChildren, 'A');

        const fragmentC = () =&gt; createFragment([<div id="c1">C1</div>, <div>C2</div>, <div>C3</div>], ChildFlags.HasNonKeyedChildren, 'C');