Skip to content

mount Fragment with new style (<>...</>) return null #142

@Eightyplus

Description

@Eightyplus

rendering a component with <> ... </> seems troublesome and often return null instead of children

functional-component.js

import React from 'react';
export default ({ message }) => <span>{message}</span>;

component.js

import React from 'react';

import FunctionalComponent from './functional-component';

export default ({ message, show }) => {
  return (
    <>
      {message}
      {show && <FunctionalComponent message={message} />}
    </>
  );
};

component.test.js

import React from 'react';
import { mount, render } from 'enzyme';

import Comp from './component';

describe('testing render of mounted component', () => {
  it('mount ', () => {
    const wrapper = mount(<Comp message="mount " />);
    expect(wrapper).toMatchSnapshot();
  });

  it('mount then render', () => {
    const wrapper = mount(<Comp message="mount then render" />);
    expect(wrapper.render()).toMatchSnapshot();
  });

  it('render all', () => {
    const wrapper = render(<Comp message="render" show />);
    expect(wrapper).toMatchSnapshot();
  });

  it('render conditional', () => {
    const wrapper = render(<Comp message="render conditional" show={false} />);
    expect(wrapper).toMatchSnapshot();
  });
});

component.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`testing render of mounted component mount  1`] = `
<_default
  message="mount "
>
  mount 
</_default>
`;

exports[`testing render of mounted component mount then render 1`] = `null`;

exports[`testing render of mounted component render all 1`] = `
Array [
  "render",
  <span>
    render
  </span>,
]
`;

exports[`testing render of mounted component render conditional 1`] = `null`;

Expected behavior

Render children and not null

works if I exchange <> with <Fragment>

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions