reactjs - 无法对覆盖 material-ui 的样式组件进行单元测试
问题描述
我有一个用于包装 Material-UI 列表项的导航列表项的样式组件,并使用“&&”来覆盖样式而不使用“!important”标志。
import { ListItem } from 'material-ui/List'
export const StyledNavListItem = withTheme()(styled(ListItem)`
&& {
background: ${props => props.selected
? props.theme.palette.backgrounds.selected
: 'inherit'};
}
`)
它是这样实现的:
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>
)
}
但是,当尝试在这里进行单元测试时(使用 Jest、酶和 jest-styled-components):
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)
})
我收到错误消息Property not found: "background"
如果我从我的样式中删除 '&&' 包装,测试通过没有问题,但是我没有让样式在组件上工作。有没有办法进入那个覆盖块来测试它?
解决方案
我找到了一个解决方案——通过在 material-ui 组件中指定自定义类,然后在样式中引用它,它可以通过附加修饰符进行测试
Example Typography.style.js
import React from 'react'
import { withTheme } from 'material-ui/styles'
import styled, { css } from 'styled-components'
import Typography from 'material-ui/Typography'
export const StyledTypography = withTheme()(styled(({emphasized, strong, inlined, color, ...other}) => {
return <Typography {...other} classes={{root: 'typography-root'}} />
})`
&.typography-root {
line-height: 1.2em;
${props => !props.variant && css`
font-size: 1em;
`}
${props => props.color && props.theme.palette.typography[props.color] && css`
color: ${props.theme.palette.typography[props.color]};
`}
${props => props.strong && css`
font-weight: 500;
`}
${props => props.emphasized && css`
font-style: italic;
`}
${props => props.inlined && css`
display: inline-block;
`}
}
`)
Test
it('does something', () => {
const typography = mount(
<MuiThemeProvider theme={praxisTheme}>
<Typography />
</MuiThemeProvider>
)
expect(typography.find(MaterialUITypography)).toHaveStyleRule('line-height', '1.2em', { modifier: '&.typography-root' })
})
推荐阅读
- javascript - 如何读取赛普拉斯的数据值?
- vim - 如何将复制缓冲区中的一行粘贴到每行的末尾?
- python - 输出不一致:zip() 函数
- c# - 在 C# 中给定带有参数的 SQL 命令时,修复 SDReader 抛出异常
- javascript - javascript提交表单时Rails无法识别mime类型
- java - Java 方法静默失败。现在有 Throwables,没有崩溃,我找不到任何东西
- c# - MonoLauncher 实例在停止我的 Visual Studio 调试后暂停
- go - 我怎么知道我所有的 goroutine 确实在等待使用 golang 的同步包的条件
- python - Pyclbr readmodule 在另一个目录的脚本中运行时失败
- html - CSS Less手表编译器-如何传递参数并根据参数生成CSS的多个副本?