In my project, I have a customized styled component for a navigation list item which is wrapped around a Material-UI list item. To override the default styles without using '!important' flags, I am utilizing the '&&' operator in the styling.
import { ListItem } from 'material-ui/List'
export const StyledNavListItem = withTheme()(styled(ListItem)`
&& {
background: ${props => props.selected
? props.theme.palette.backgrounds.selected
: 'inherit'};
}
`)
The implementation of this styled component looks like this:
export const NavListItem = props => {
return (
<StyledNavListItem selected={props.selected} component={Link} to={props.to || ''} onClick={props.onClick || (() => false)} button>
{props.icon && <ListItemIcon><Icon name={props.icon} /></ListItemIcon>}
<ListItemText primary={props.children || ''} />
</StyledNavListItem>
)
}
However, when attempting to perform unit testing (using Jest, enzyme, and jest-styled-components), I encounter an issue:
it('should change the background color of an item if `props.selected` is truthy', () => {
const navList = mount(
<MuiThemeProvider theme={theme}>
<BrowserRouter>
<Route>
<NavList>
<NavListItem>item text</NavListItem>
<NavListItem selected>item text</NavListItem>
</NavList>
</Route>
</BrowserRouter>
</MuiThemeProvider>
)
expect(navList.find(StyledNavListItem).at(0)).toHaveStyleRule('background', '#e0e0e0')
expect(navList.find(StyledNavListItem).at(1)).toHaveStyleRule('background', theme.palette.backgrounds.selected)
})
An error message is displayed stating Property not found: "background". Interestingly, removing the '&&' wrapper from the styles allows the tests to pass smoothly, but then the component doesn't reflect the desired styles. Is there a way to access and test the overrides within that block?