lundi 28 août 2017

Mock child components - React Native + Jest

I've been struggling with this problem for a while.. I have a ListView component with a set of ListItem nested components. I'm trying to mock the ListItem component but it seems it doesn't because the resulting snapshot is always the same.

Can you please tell me what I'm doing wrong here? Here's the code:

ListView

import React, { Component } from 'react';
import { ListView } from 'react-native';
import { connect } from 'react-redux';
import ListItem from './ListItem';

export class LibraryList extends Component {
  componentWillMount() {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    });

    this.dataSource = ds.cloneWithRows(this.props.libraries); 
  }

  renderRow(library) {
    return <ListItem library={library} />;
  }

  render() {
    return (
      <ListView
        dataSource={this.dataSource}
        renderRow={this.renderRow}
      />
    ); 
  }
}

const mapStateToProps = state => {
  return {
    libraries: state.libraries,
  };
};

export default connect(mapStateToProps)(LibraryList);

ListItem

import React, { Component } from 'react';
import { 
  Text,
  View,
  TouchableWithoutFeedback,
  LayoutAnimation
} from 'react-native';
import { connect } from 'react-redux';
import { CardSection } from './common'; 
import * as actions from './../actions';

class ListItem extends Component {

  componentWillUpdate() {
    LayoutAnimation.spring();
  }

  renderDescription() {
    const { library, expanded } = this.props;

    if (expanded) {
      return (
        <CardSection>
          <Text style=>
            {library.description}
          </Text>
        </CardSection>
      );
    }
  }

  render() {
    const { titleStyle } = styles;
    const { library, selectLibrary } = this.props;

    return (
      <TouchableWithoutFeedback
        onPress={() => selectLibrary(library.id)}
      >
        <View>
          <CardSection>
            <Text style={titleStyle}>
              {library.title}
            </Text>
          </CardSection>
          {this.renderDescription()}
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = {
  titleStyle: {
    fontSize: 18,
    paddingLeft: 15,
  },
};

const mapStateToProps = (state, ownProps) => {
  const expanded = state.selectedLibraryId === ownProps.library.id;

  return {
    expanded,
  };
};

export default connect(mapStateToProps, actions)(ListItem);

LibraryList.test

import React from 'react';
import renderer from 'react-test-renderer';
import configureStore from 'redux-mock-store';
import LibraryList from './../src/components/LibraryList';

describe('Library list component', () => {
  const middlewares = [];
  const mockStore = configureStore(middlewares);

  it('must render a list of libraries', () => {
    jest.mock('../src/components/ListItem', () => 'ListItem');

    const initialState = {
      libraries: [
        {
          id: 0,
          title: 'Webpack',
          description: 'Webpack is a module bundler...',
        },
      ],
    };

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

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

Aucun commentaire:

Enregistrer un commentaire