Jest snapshot with props

Question

i'm trying to do a snapshot of this component :

export default class LoginExternalApi extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let store = this.props.store.getState();

    return (
      <View style={styles.container}>
        {store.facebookToken ? null : <FacebookButtonConnect />}
        {store.spotifyToken ? null : <SpotifyButtonConnect />}
      </View>
    )
  }
}

As you can see, I've got a store variable inside the render() method, which call a props.

Here is my test file based on Jest librairie :

import 'react-native';
import React from 'react';
import LoginExternalApi from '../app/scenes/LoginExternalApi';

import renderer from 'react-test-renderer';

test('LoginExternalApi scene renders correctly', () => {
  const tree = renderer.create(
    <LoginExternalApi />
  ).toJSON();

  expect(tree).toMatchSnapshot();
});

And here is my error : TypeError: Cannot read property 'getState' of undefined

Any idea of how my test should be written ? Should I mock my store & how ?

Answer 1

It really depends on how your store normally ends up there as a prop and how you want to test that your component renders correctly.

For example, you could mock your store and then snapshot one version for each of your providers.

test('LoginExternalApi scene renders Spotify connect button', () =>
  let store = {
    getState() {
      return { spotifyToken: 'foo' }
    }
  };

  const tree = renderer.create(
    <LoginExternalApi store={store} />
  ).toJSON();

  expect(tree).toMatchSnapshot();
});

However, it looks like you're using Redux and you might find that as your components grow they need to work with other parts of the store API — dispatching actions, for example. At this point, it may well be easier to test against a real store, rather than mocking it.

The react-redux API makes it trivial to source your store for a given component, rather than having to think about passing the store as a prop at every level.

const tree = renderer.create(
  <Provider store={store}>
    <LoginExternalApi />
  </Provider>
).toJSON();

So long as your <LoginExternalApi /> component interfaces with the store through the connect function, then you can wrap it in an explicit store for testing.