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