Enzyme: API for inline styles

[yankopetrov]

Do you plan to add API support for inline styles attribute in the future?

expect(wrapper.find('.my-button').style).to.equal({ width: '100px' });

Something like the existing hasClass

expect(wrapper.find('.my-button').hasClass('disabled')).to.equal(true);

[ljharb]

I'm not sure what the benefit would be; hasClass makes sense because className is otherwise a space-separated list of strings, so checking it correctly for a single class is non-trivial. style, however, is just an object, and making assertions on object properties is a solved problem.

[yankopetrov]

Inline styles can be generated depending on multiple props and conditions. Maybe i get it wrong or miss something, but don't know how to do test for this:

Example

const { prop1 } = props
const { prop2 } = context
const styles = {}
if (prop1) styles.width = '100px'
if (prop2) styles.width = '200px' 
return <div style={styles}>

There are couple question about the same on stackoverflow without answer yet.

[ljharb]

The same way you test any plain object:

expect(wrapper.prop('styles')).to.contain.all.keys({ width: '100px' });
/* or */
expect(wrapper.prop('styles')).to.eql({ width: '200px' });
/* or */
expect(wrapper.prop('styles')).to.eql({});

[yankopetrov]

@ljharb Cool thanks