Enzyme: Test component with style via props

[ivanbtrujillo]

Hi all,

I'm trying to test a component that has an object with an style via props.

The component:
render(){ return( <View > <Text style={this.style.title}>{this.props.rowData.title}</Text> </View> ) }

Inside my test, i have an object with the style and other for the data:
const styles = StyleSheet.create({ post: { alignItems: 'flex-start', alignSelf: 'stretch', padding: 10, }, title: { fontSize: 18 }, content: { fontSize: 14 } });

var data={ title:'This is the title', content:'This is the content' }

Here, i render the component:
const wrapper = shallow(<Post rowData={data} style={styles}/>);

So when i try to check if the component it's ok :
it("Should have a title", () => { //Title expect(wrapper.contains(<Text style={fontSize: 18} >This is the title</Text>)).to.equal(true); });

i've obtain an unexpected token error :

If i remove the style (from test and component) it works, so it seem that doesn't understand my styles object but the data object works perfectly.

Some ideas to make it work or anybody know what i'm doing wrong?

Thanks in advance!

[AugustinLF]

And if you do it("Should have a title", () => { //Title expect(wrapper.contains(<Text style={{fontSize: 18}} >This is the title</Text>)).to.equal(true); });, does it work? You need to write an object literal inside the style={} :) This has nothing to do with your tests, it's just not JSX valid!

[aweary]

@AugustinLF is exactly right, your test contains a syntax error 👍 Closing as this isn't an actual issue with enzyme.

[ivanbtrujillo]

Yep was that, thanks for answer with a literal object inside it works.