styled-components Jest集成

Jest集成 Jest Integration

Jest 樣式組件是一組實用程序，用于使用Jest測試樣式組件。此包改進(jìn)了快照測試體驗，并提供了全新的匹配器，用于對樣式規(guī)則做出期望值。

安裝

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

快照測試

當(dāng)我們使用樣式組件構(gòu)建 UI 時，我們希望確保輸出不會意外更改?？煺諟y試是測試 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"
/>
`

對于一個現(xiàn)實世界的演示，看看這個網(wǎng)站的存儲庫。

toHaveStylerule

如果我們只想檢查特定樣式是否應(yīng)用于元素，我們可以使用toHaveStylerule匹配器。此函數(shù)需要兩個必需的參數(shù)，一個屬性（字符串）和一個值（字符串或 RegExp），以及一個可選對象來搜索嵌套在規(guī)則內(nèi)的規(guī)則或向類選擇器添加修飾符。

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',
  })
})