-
Notifications
You must be signed in to change notification settings - Fork 63
Open
Labels
Description
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