Question

我有一个导航列表项的样式组件，它包装了一个Material-UI列表项，并使用＆＃39;＆amp;＆amp;＆＃39;为了覆盖样式而不使用＆＃39;！important＆＃39;标志。

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" 如果我删除＆＃39;＆amp;＆amp;＆＃39;从我的样式包装，测试通过没有问题，但后来我没有得到样式来处理组件。有没有办法达到覆盖块来测试它？

Answer 1

我找到了一个解决方案 - 通过在material-ui组件中指定自定义类，然后在样式中引用它，它可以使用附加的修改器进行测试

示例 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; `} } `)

<强>测试

it('does something', () => { const typography = mount( <MuiThemeProvider theme={praxisTheme}> <Typography /> </MuiThemeProvider> ) expect(typography.find(MaterialUITypography)).toHaveStyleRule('line-height', '1.2em', { modifier: '&.typography-root' }) })

无法对可以覆盖材料的样式组件进行单元测试 - ui

1 个答案: