React 16 fragments (rendering arrays and strings) unsupported #1213
Description
React 16 added a new return type of an array with many fragments of JSX, see React 16 blog post
Enzyme v3.0.0 with React 16 adapter 1.0.0 throws an error with this sample code
Error
/node_modules/react-dom/cjs/react-dom-server.node.development.js:2776
var tag = element.type.toLowerCase();
^
TypeError: Cannot read property 'toLowerCase' of undefined
Failing test
import Adapter from 'enzyme-adapter-react-16';
import { configure, shallow } from 'enzyme';
import React from 'react';
import test from 'tape';
function Fragments() {
return [
<li key="A">First item</li>,
<li key="B" id="item">Second item</li>,
<li key="C">Third item</li>
];
}
test('One element parent', (assert) => {
configure({ adapter: new Adapter() });
const wrapper = shallow(<Fragments />);
const actual = wrapper.html();
const expected = undefined;
assert.notEqual(actual, expected, 'Has ID selector');
assert.end();
});
Passing test
import Adapter from 'enzyme-adapter-react-16';
import { configure, shallow } from 'enzyme';
import React from 'react';
import test from 'tape';
function NotFragments() {
return (
<ul>
<li key="A">First item</li>,
<li key="B" id="item">Second item</li>,
<li key="C">Third item</li>
</ul>
);
}
test('One element parent', (assert) => {
configure({ adapter: new Adapter() });
const wrapper = shallow(<NotFragments />);
const actual = wrapper.find('#item').is('li');
const expected = true;
assert.equal(actual, expected, 'Has ID selector');
assert.end();
});
-=Dan=-