W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
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;}<buttonclassName="c0"/>`
對于一個現(xiàn)實世界的演示,看看這個網(wǎng)站的存儲庫。
如果我們只想檢查特定樣式是否應(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',})})
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: