styled-components Jest集成

Jest集成 Jest Integration

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

安裝

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

快照測(cè)試

當(dāng)我們使用樣式組件構(gòu)建 UI 時(shí)，我們希望確保輸出不會(huì)意外更改。快照測(cè)試是測(cè)試 React 組件的極好方法，此包通過將樣式添加到快照中使體驗(yàn)更加愉快。

下面是一個(gè)測(cè)試示例：

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"
/>
`

對(duì)于一個(gè)現(xiàn)實(shí)世界的演示，看看這個(gè)網(wǎng)站的存儲(chǔ)庫。

toHaveStylerule

如果我們只想檢查特定樣式是否應(yīng)用于元素，我們可以使用toHaveStylerule匹配器。此函數(shù)需要兩個(gè)必需的參數(shù)，一個(gè)屬性（字符串）和一個(gè)值（字符串或 RegExp），以及一個(gè)可選對(duì)象來搜索嵌套在規(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',
  })
})