代码之家 › 专栏 › 技术社区 › visarts

无法单元测试覆盖材质ui的样式化组件

styled-components material-ui jestjs reactjs

visarts · 技术社区 · 6 年前

我有一个导航列表项的样式化组件,它包装了一个材质UI列表项,并使用“&&'以便在不使用“”的情况下覆盖样式!“重要”标志。

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样式的组件):

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" 如果我删除“&&'从我的样式包装,测试通过没有问题,但然后我没有得到用于组件的样式。有没有办法进入覆盖块来测试它?

1 回复 | 直到 6 年前

visarts 6 年前

我找到了一个解决方案——通过在材质ui组件中指定自定义类,然后在样式中引用它,它在附加了修饰符的情况下测试良好

实例印刷术。风格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' })
  })