Enzyme: Immutable.js iterable children not rendering in v3

Created on 27 Sep 2017 · 4Comments · Source: enzymejs/enzyme

Hello!

Congrats on the v3 release! It must feel awesome to have this rewrite released.

I have noticed that in v3 Immutable JS children are not "rendering":


// App.js

import Immutable from 'immutable';

class App extends Component {
  render() {
    return (
      <div className="App">
        {Immutable.List(['first', 'second', 'third']).map(item => <span key={item}>{item}</span>)}
      </div>
    );
  }
}

// App.test.js

import { shallow as enzyme2shallow } from 'enzyme2';
import { shallow as enzyme3shallow } from 'enzyme';

it('renders immutable children in enzyme 2', () => {
  expect(enzyme2shallow(<App />).debug()).toMatchSnapshot();
});

it('does not render immutable children in enzyme 3', () => {
  expect(enzyme3shallow(<App />).debug()).toMatchSnapshot();
});

// App.test.js.snap

exports[`does not render immutable children in enzyme 3 1`] = `
"<div className=\\"App\\">
  <undefined />
</div>"
`;

exports[`renders immutable children in enzyme 2 1`] = `
"<div className=\\"App\\">
  <span>
    first
  </span>
  <span>
    second
  </span>
  <span>
    third
  </span>
</div>"
`;

If I add a toArray() call to that List then this renders as expected, but since React accepts this code, I think enzyme should as well.

I made a repo that shows this bug as simply as I could think: https://github.com/kmcq/immutable-children-enzyme. That's where those code snippets come from.

Thank you so much! Let me know if I can help fix this. Cheers!

v3 bugs

Source