Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Eightyplus opened this issue Jun 15, 2019 · 2 comments
Open

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

Eightyplus opened this issue Jun 15, 2019 · 2 comments

Comments

@Eightyplus
Copy link

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>

@criticalserenity
Copy link

Hi, guys. Are there any updates on this?

The same situation causes when I'm trying to render plain string without any node.

// component

const PlainString = () => 'plain string'
//test

import React from 'react'
import { render } from 'enzyme'
import PlainString from '../PlainString'

describe('<PlainString />', () => {
  it('should return "plain string" text', () => {
    const wrapper = render(<PlainString />);

    expect(wrapper).toMatchSnapshot();
  })
})
// snapshot

exports[`<PlainString /> should return "plain string" text' 1`] = `null`;

@adriantoine
Copy link
Owner

Hi @criticalserenity we haven't had time to look at this bug, PRs are welcome if you want to have a look. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants