We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
rendering a component with <> ... </> seems troublesome and often return null instead of children
<> ... </>
null
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`;
Render children and not null
works if I exchange <> with <Fragment>
<>
<Fragment>
The text was updated successfully, but these errors were encountered:
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`;
Sorry, something went wrong.
Hi @criticalserenity we haven't had time to look at this bug, PRs are welcome if you want to have a look. Thanks!
No branches or pull requests
rendering a component with
<> ... </>
seems troublesome and often returnnull
instead of childrenfunctional-component.js
component.js
component.test.js
component.test.js.snap
Expected behavior
Render children and not
null
works if I exchange
<>
with<Fragment>
The text was updated successfully, but these errors were encountered: