Problem with ListView using enzyme

[gunters63]

Given the following simple component using a ListView:

var React = require('react-native');
var {
  ListView,
  Text,
  } = React;

export default React.createClass({
  getInitialState: function () {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(['row 1', 'row 2']),
    };
  },

  render: function () {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
      />
    );
  }
})

The following Mocha spec throws a TypeError: ListView.DataSource is not a function in the getInitialState function.

/* global React, shallow, mount, _, expect */

import ListViewSimpleExample from './ListViewSimpleExample';

describe('<ListViewSimpleExample />', () => {

  it('should render stuff', () => {
    const wrapper = shallow(<ListViewSimpleExample/>);
    console.log(wrapper.debug());
  });
});

What could be the cause?

My test environment:

package.json (abbreviated):

  "dependencies": {
    "react-native": "0.19.0",
  },
  "devDependencies": {
    "babel-preset-react-native": "^1.4.0",
    "enzyme": "^2.0.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-native-mock": "0.0.6",
  }
}

.babelrc:

{
  "presets": ["react-native"]
}

Other simple specs (only using View and Text) work fine, so it seems not to be a general problem.

[Jeiwan]

The answer is simple: ListView is just an empty component, as can be seen here: https://github.com/lelandrichardson/react-native-mock/blob/master/src/react-native.js#L18 So it has no DataSource attribute.

Actually, in one of my projects I made this thing work. If I have time, I'll make a PR.

[gunters63]

Ah, thanks.

I saw a ListView component here:

https://github.com/lelandrichardson/react-native-mock/blob/master/src/components/ListView.js

As it seems, this is currently not used, probably wip.
I'll try to activate it with

Image: require('./components/ListView')

to see what happens :).

[iyawnis]

+1 , PR should fix it