Enzyme Shallow Rendering not working correctly - reactjs

Question

In one of my components, I check the value of my props before deciding what component to return.
But the issue I am facing in testing is that the snapshot is not getting created properly for these components.
When I am testing a component on its own, the snapshot is created properly but not when my component checks prop value before returning a JSX.
This is my component:
import React, {Component} from 'react'
import {Button, Text, View, FlatList, StyleSheet, ActivityIndicator} from 'react-native'
import CategoryCell from '../Components/CategoryCell'
import { connect } from 'react-redux'
import { fetchQuotes } from '../actions/Quotes'
class QuotesCategories extends Component {
static navigationOptions = {
title: 'Categories',
}
render() {
return this.props.error ? (
<View style={styles.Container}>
<Text style={{color: 'red'}}>FAILED TO LOAD DATA</Text>
<Button
title='Reload'
onPress={this.props.fetchQuotes}
/>
</View>
) : this.props.loading ? (
<View style={styles.Container}>
<ActivityIndicator size="large"/>
</View>
) : (
<View style={styles.Container}>
<FlatList
style= {{flex:1, width: '100%'}}
data= {this.props.data}
renderItem = {({item,index}) => {
return (
<CategoryCell Category={item} navigation={this.props.navigation} id={index}/>
)
}}
keyExtractor = {(item, index) => item.category}
/>
<Text>Additions</Text>
</View>
)
}
}
const styles = StyleSheet.create({
Container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
})
export const mapStateToProps = (state) => {
return {
loading: state.loading,
error: state.error,
data: state.data
}
}
export const mapDispatchToProps = (dispatch) => {
return {
fetchQuotes: () => {
dispatch(fetchQuotes())
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(QuotesCategories)
I am trying to test the three cases
When there is some error
When the data is loading
When the data has loaded
I am trying to test the three cases
error and loading is a boolean
data is an array of JSON objects
This is the test for the error case:
import React from 'react'
import {shallow} from 'enzyme'
import QuoteCategories from '../../Components/QuoteCategories'
import quotes from '../fixtures/quotes-fixture'
describe('Testing QuoteCategories component', () => {
it('should load error button when error loading', ( ) => {
const wrapper = shallow(
<QuoteCategories
loading = {false}
error = {true}
data = {undefined}
/>
)
expect(wrapper).toMatchSnapshot()
}
)
}
)
But in the QuoteCategories.test.js.snap file this is the snapshot I see:
exports[`Testing QuoteCategories component should load error button when error loading 1`] = `
<ContextConsumer>
<Component />
</ContextConsumer>
`;
Why am I seeing these tags <ContextConsumer>,<Component /> ?
In my other component test which directly returns a component, the snapshot is displaying properly:
My Component:
import React from 'react'
import { View, Text, TouchableHighlight, StyleSheet } from 'react-native'
const FavouriteQuoteCell = (props) => {
return (
<TouchableHighlight
onPress={() => props.navigation.navigate('Quotes',{id: props.item.parentId, category: props.item.category})}
style={styles.TableCell}
>
<View>
<Text style={styles.Quote}>{props.item.text}</Text>
<Text style={styles.Author}>-- {props.item.person}</Text>
<View style={styles.CategoryPill}>
<Text style={styles.Category}>
{props.item.category}
</Text>
</View>
</View>
</TouchableHighlight>
)
}
export default FavouriteQuoteCell
const styles = StyleSheet.create({
TableCell: {
backgroundColor: '#ff6347',
margin:5,
padding: 5,
justifyContent: 'space-around',
flexDirection: 'column',
flex: 1 ,
padding: 10,
margin: 5,
borderRadius: 15,
},
"Quote": {
fontWeight: 'bold',
color: 'white'
},
"Author": {
fontWeight:'200',
color:'white',
justifyContent: 'flex-end',
alignItems: 'flex-end',
height: 20
},
Category: {
color: '#ff6347',
fontWeight: 'bold',
fontSize: 12,
textTransform: 'capitalize',
margin: 'auto'
},
CategoryPill: {
marginTop: 10,
padding: 2,
height: 20,
borderRadius: 10,
backgroundColor: 'white',
width: 100,
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
The test:
import React from 'react'
import {shallow} from 'enzyme'
import FavouriteQuoteCell from '../../Components/FavouriteQuoteCell'
import {favouriteItem} from '../fixtures/favourites-fixture'
describe('testing FavouriteQuoteCell', () => {
let wrapper,navigation
beforeEach(() => {
navigation = {
navigate: jest.fn()
}
wrapper = shallow(<FavouriteQuoteCell navigation={navigation} item={favouriteItem}/>)
})
it('should render FavouriteQuoteCell correctly', () => {
expect(wrapper).toMatchSnapshot()
})
})
The snapshot:
exports[`testing FavouriteQuoteCell should render FavouriteQuoteCell correctly 1`] = `
<TouchableHighlight
activeOpacity={0.85}
delayPressOut={100}
onPress={[Function]}
style={
Object {
"backgroundColor": "#ff6347",
"borderRadius": 15,
"flex": 1,
"flexDirection": "column",
"justifyContent": "space-around",
"margin": 5,
"padding": 10,
}
}
underlayColor="black"
>
<View>
<Text
style={
Object {
"color": "white",
"fontWeight": "bold",
}
}
>
Believe you can and you"re halfway there
</Text>
<Text
style={
Object {
"alignItems": "flex-end",
"color": "white",
"fontWeight": "200",
"height": 20,
"justifyContent": "flex-end",
}
}
>
--
Theodore Roosevelt
</Text>
<View
style={
Object {
"alignItems": "center",
"backgroundColor": "white",
"borderRadius": 10,
"flex": 1,
"height": 20,
"justifyContent": "center",
"marginTop": 10,
"padding": 2,
"width": 100,
}
}
>
<Text
style={
Object {
"color": "#ff6347",
"fontSize": 12,
"fontWeight": "bold",
"margin": "auto",
"textTransform": "capitalize",
}
}
>
inspirational
</Text>
</View>
</View>
</TouchableHighlight>
`;

Answer 1

Your QuotesCategories component is connected to redux with:
export default connect(mapStateToProps,mapDispatchToProps)(QuotesCategories)
that is why when you are shallow rendering you see the redux wrapper component in the snapshot and not your QuotesCategories.
The usual why to fix this to also export your QuotesCategories and import it with its name in your tests:
So your component file should have two exports:
export class QuotesCategories extends Component {
...
}
export default connect(mapStateToProps,mapDispatchToProps)(QuotesCategories)
And in your test you should import QuotesCategories with:
import { QuoteCategories } from '../../Components/QuoteCategories'