Skip to content

Commit 49a0572

Browse files
Update README.md (#372)
Added helpful example to show override styles test case Co-authored-by: Evan Jacobs <[email protected]>
1 parent b5488fa commit 49a0572

File tree

1 file changed

+16
-0
lines changed

1 file changed

+16
-0
lines changed

README.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -442,6 +442,22 @@ test('nested buttons are flexed', () => {
442442
})
443443
```
444444

445+
You can take a similar approach when you have classNames that override styles
446+
```js
447+
const Button = styled.button`
448+
background-color: red;
449+
450+
&.override {
451+
background-color: blue;
452+
}
453+
`
454+
const wrapper = mount(<Button className="override">I am a button!</Button>);
455+
456+
expect(wrapper).toHaveStyleRule('background-color', 'blue', {
457+
modifier: '&.override',
458+
});
459+
```
460+
445461
This matcher works with trees serialized with `react-test-renderer`, `react-testing-library`, or those shallow rendered or mounted with Enzyme.
446462
It checks the style rules applied to the root component it receives, therefore to make assertions on components further in the tree they must be provided separately (Enzyme's [find](http://airbnb.io/enzyme/docs/api/ShallowWrapper/find.html) might help).
447463

0 commit comments

Comments
 (0)