Jest: react-native Listview Testing

[saleehk]

This show ups when testing ListView in react-native

TypeError: Cannot read property '_tag' of null
        at ReactNativeBaseComponent.Mixin.mountComponent (node_modules/react/lib/ReactNativeBaseComponent.js:179:45

[frankrowe]

Also getting this error with ScrollView.

[cpojer]

I recommend for now to mock out these components:

jest.mock('ListView', () => 'ListView');
jest.mock('ScrollView', () => 'ScrollView');

[DaleLJefferson]

I have this working but you have to do something more complex for listview since DataSource is a static method on ListView.

[saleehk]

@cpojer When we use Mocks as @DaleJefferson said it throws error in ListView.DataSource

[cpojer]

Oh I see. @DaleJefferson can you share your mock? We should add it to the jest-react-native preset.

[DaleLJefferson]

This works but not sure about returning a View.

jest.mock('ListView', () => require('react').createClass({
    statics: {
        DataSource: require.requireActual('ListView').DataSource,
    },
    render() {
        const {View} = require('react-native');

        return <View />;
    },
}));

I guess we could render out some of the rows to give a better snapshot

[frankrowe]

This mock of ListView is working for me

jest.mock('ListView', () => {
  return require('react').createClass({
    statics: {
      DataSource: require.requireActual('ListView').DataSource,
    },
    render() {
      return require('react').createElement('ListView', this.props, this.props.children);
    }
  });
});

[ranjitpandit]

@DaleJefferson and @frankrowe I tried using both the ListView mocks but I'm getting this error. Any ideas?

FAIL  js/components/list/__tests__/TestShowList.js (0.39s)
 ShowList › it renders correctly
  - RangeError: Maximum call stack size exceeded
        at Runtime._shouldMock (node_modules/jest-runtime/build/index.js:547:14)
        at null.user:/JestSnapshot/node_modules/react-native/Libraries/CustomComponents/ListView/ListView.js: (js/components/list/__tests__/TestShowList.js:26:40)
        at null.user:/JestSnapshot/node_modules/react-native/Libraries/CustomComponents/ListView/ListView.js: (js/components/list/__tests__/TestShowList.js:28:12)
        at null.user:/JestSnapshot/node_modules/react-native/Libraries/CustomComponents/ListView/ListView.js: (js/components/list/__tests__/TestShowList.js:28:12)
  ShowList
    ✕ it renders correctly (28ms)

[ranjitpandit]

actually, I'm getting require.requireActual as undefined. What could I be missing? Any tips would be great. Here is the repo I'm using to isolate the issue.
https://github.com/ranjitpandit/jest-snapshot

[GrigoryPtashko]

@ranjitpandit can you show the exact command line arguments you use to run this test?

[ranjitpandit]

@GrigoryPtashko in the root of the project run the command "npm test"

[GrigoryPtashko]

@ranjitpandit which project? I mean what switches is jest run with? Is there the -i (jest -i run in-band) or maybe you specify the test regex on the command line (like jest TestRegex)?

[ranjitpandit]

In the root of below project run 'npm test' command
https://github.com/ranjitpandit/jest-snapshot

I'm using the steps described here.
https://facebook.github.io/jest/docs/tutorial-react-native.html#content

[saleehk]

any updates

[kgowru]

So I tried the mock shown by @frankrowe and more elaborate mocks created by Leland found here https://github.com/lelandrichardson/react-native-mock.

Yet I keep seeing this error:

Using Jest CLI v14.1.0, jasmine2, babel-jest, jest-react-native preset
 FAIL  js/app/CardView/CardView/__tests__/cardviewjest-enzymetest.js (4.512s)
 When <CardView /> is rendered › it should show page indicator on bottom for >10 events
  - TypeError: Cannot read property 'displayName' of undefined
        at new ShallowComponentWrapper (node_modules/react/lib/ReactTestUtils.js:349:29)
        at ReactShallowRenderer._render (node_modules/react/lib/ReactTestUtils.js:401:14)
        at _batchedRender (node_modules/react/lib/ReactTestUtils.js:383:10)
        at Object.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:61:1)
        at Object.batchedUpdates (node_modules/react/lib/ReactUpdates.js:98:18)
        at ReactShallowRenderer.render (node_modules/react/lib/ReactTestUtils.js:376:14)
        at ReactShallowRenderer.render (node_modules/enzyme/build/react-compat.js:153:23)
        at node_modules/enzyme/build/ShallowWrapper.js:90:16
        at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react/lib/Transaction.js:138:12)
        at Object.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:63:13)
  When <CardView /> is rendered
    ✕ it should show page indicator on bottom for >10 events (5ms)

Anyone see this before?

[lewisbarber]

I'm also unable to test this, even with the mock given above:

FAIL  __tests__/Components/FriendList.spec.js (2.936s)
 FriendList › it loads FriendList with mandatory props
  - /Users/lewisbarber/Documents/ReactNative/app/node_modules/react-clone-referenced-element/cloneReferencedElement.js:18
          );
          ^
    SyntaxError: Unexpected token )
        at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:306:10)
        at Object.<anonymous> (node_modules/react-native/Libraries/CustomComponents/ListView/ListView.js:44:28)
        at null.user:/Users/lewisbarber/Documents/ReactNative/app/node_modules/react-native/Libraries/CustomComponents/ListView/ListView.js: (__tests__/Components/FriendList.spec.js:22:20)

This is the offending line:

this.state = { 
    friends: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })
};

It doesn't seem to like the way I'm creating the DataSource. Any ideas?

[saleehk]

@lewisbarber add

 "preprocessorIgnorePatterns": [
      "node_modules/(?!react-native|react-clone-referenced-element|tcomb-form-native)"
    ],

to jest config in package.json

[zackify]

@saleeh93 that fixed my problem. I added your ignore pattern, and a mock mentioned above. Why isn't this built in though?

[zackify]

If anyone wants a quick fix, I added it to this little utility I made for snapshotting without the boilerplate. https://github.com/navjobs/jest-snapshot-utils

[cpojer]

I'm adding new default mocks in Jest 15 this week: https://github.com/facebook/jest/pull/1516