styled-components Jest集成

Jest集成 Jest Integration

Jest 样式组件是一组实用程序，用于使用Jest测试样式组件。此包改进了快照测试体验，并提供了全新的匹配器，用于对样式规则做出期望值。

安装

npm install --save-dev jest-styled-components

快照测试

当我们使用样式组件构建 UI 时，我们希望确保输出不会意外更改。快照测试是测试 React 组件的极好方法，此包通过将样式添加到快照中使体验更加愉快。

下面是一个测试示例：

import React from 'react'

import styled from 'styled-components'
import renderer from 'react-test-renderer'
import 'jest-styled-components'
const Button = styled.button`
  color: red;
`
test('it works', () => {
  const tree = renderer.create(<Button />).toJSON()
  expect(tree).toMatchSnapshot()
})

下面是生成快照的示例：

exports[`it works 1`] = `
.c0 {
  color: green;
}
<button
  className="c0"
/>
`

对于一个现实世界的演示，看看这个网站的存储库。

toHaveStylerule

如果我们只想检查特定样式是否应用于元素，我们可以使用toHaveStylerule匹配器。此函数需要两个必需的参数，一个属性（字符串）和一个值（字符串或 RegExp），以及一个可选对象来搜索嵌套在规则内的规则或向类选择器添加修饰符。

import React from 'react'
import styled from 'styled-components'
import renderer from 'react-test-renderer'
import 'jest-styled-components'
const Button = styled.button`
  color: red;
  @media (max-width: 640px) {
    &:hover {
      color: green;
    }
  }
`
test('it works', () => {
  const tree = renderer.create(<Button />).toJSON()
  expect(tree).toHaveStyleRule('color', 'red')
  expect(tree).toHaveStyleRule('color', 'green', {
    media: '(max-width: 640px)',
    modifier: ':hover',
  })
})