@-ui/jest
npm i -D @-ui/jest
-ui
-ui snapshots
的 Jest 实用程序 测试 React、Preact 和 Preact X 组件的最简单方法-ui 正在使用快照序列化程序。 您可以像这样通过 jest 配置中的 snapshotSerializers 配置属性注册序列化程序：
// jest.config.js
module.exports = {
// ... other config
snapshotSerializers: ['@-ui/jest'],
}
或者您可以像这样通过 createSerializer 方法自定义序列化程序：（下面的示例是react-test-renderer 但 @-ui/jest 也适用于酶和 react-testing-library）
```jsx 和谐
从“反应”导入反应
从“反应测试渲染器”导入渲染器
从“@-ui/styles”导入样式
从“@-ui/jest”导入序列化
器 expect.addSnapshotSerializer(serializer)
test('以正确的样式呈现', () => {
const 文本 = 样式({
标题：<代码>
字体大小：4rem；
,
})
常量树 = 渲染器
。创造（
Hello world
)
.toJSON()
期望（树）.toMatchSnapshot（）
})
### Options
#### `classNameReplacer`
`@-ui/jest`'s snapshot serializer replaces the hashes in class names with an index so that things like whitespace changes won't break snapshots. It optionally accepts a custom class name replacer, it defaults to the below.
jsx 和谐
常量 classNameReplacer = (className, index) => -ui-${index}
jsx和谐
从“@-ui/jest”导入 {createSerializer}
expect.addSnapshotSerializer(
createSerializer({
classNameReplacer（类名，索引）{
返回 my-new-class-name-${index}
},
})
)
#### `DOMElements`
`@-ui/jest`'s snapshot serializer inserts styles and replaces class names in both React and DOM elements. If you would like to disable this behavior for DOM elements, you can do so by passing `{ DOMElements: false }`. For example:
jsx
import {createSerializer} from '@-ui/jest'
// 配置@-ui/jest 忽略 DOM 元素
expect.addSnapshotSerializer(createSerializer({DOMElements: false}))
## Custom assertions
### toHaveStyleRule
To make more explicit assertions when testing your components you can use the `toHaveStyleRule` matcher.
jsx 和谐
从“反应”导入反应
从“反应测试渲染器”导入渲染器
import {matchers} from '@-ui/jest'
// 添加 '@-ui/jest' 提供的自定义匹配器
expect.extend(matchers)
test('以正确的样式呈现', () => {
const 文本 = 样式({
标题：<代码>
字体大小：4rem；
,
})
常量树 = 渲染器
。创造（
Hello world
)
.toJSON()
期望（树）.toHaveStyleRule（'字体大小'，'4rem'）
期望（树）.not.toHaveStyleRule（'颜色'，'hotpink'）
})
```
Credit
这受到 jest-emotion
这在很大程度上受到 jest-glamor-react 的启发。
LICENSE
麻省理工学院
@-ui/jest
npm i -D @-ui/jest
Jest utilities for -ui
-ui snapshots
The easiest way to test React, Preact, and Preact X components with -ui is using the snapshot serializer. You can register the serializer via the snapshotSerializers configuration property in your jest configuration like so:
// jest.config.js
module.exports = {
// ... other config
snapshotSerializers: ['@-ui/jest'],
}
Or you can customize the serializer via the createSerializer method like so: (the example below is with react-test-renderer but @-ui/jest also works with enzyme and react-testing-library)
```jsx harmony
import React from 'react'
import renderer from 'react-test-renderer'
import styles from '@-ui/styles'
import serializer from '@-ui/jest'
expect.addSnapshotSerializer(serializer)
test('renders with correct styles', () => {
const text = styles({
heading:
font-size: 4rem;
,
})
const tree = renderer
.create(
Hello world
)
.toJSON()
expect(tree).toMatchSnapshot()
})
### Options
#### `classNameReplacer`
`@-ui/jest`'s snapshot serializer replaces the hashes in class names with an index so that things like whitespace changes won't break snapshots. It optionally accepts a custom class name replacer, it defaults to the below.
jsx harmony
const classNameReplacer = (className, index) => -ui-${index}
jsx harmony
import {createSerializer} from '@-ui/jest'
expect.addSnapshotSerializer(
createSerializer({
classNameReplacer(className, index) {
return my-new-class-name-${index}
},
})
)
#### `DOMElements`
`@-ui/jest`'s snapshot serializer inserts styles and replaces class names in both React and DOM elements. If you would like to disable this behavior for DOM elements, you can do so by passing `{ DOMElements: false }`. For example:
jsx
import {createSerializer} from '@-ui/jest'
// configures @-ui/jest to ignore DOM elements
expect.addSnapshotSerializer(createSerializer({DOMElements: false}))
## Custom assertions
### toHaveStyleRule
To make more explicit assertions when testing your components you can use the `toHaveStyleRule` matcher.
jsx harmony
import React from 'react'
import renderer from 'react-test-renderer'
import {matchers} from '@-ui/jest'
// Add the custom matchers provided by '@-ui/jest'
expect.extend(matchers)
test('renders with correct styles', () => {
const text = styles({
heading:
font-size: 4rem;
,
})
const tree = renderer
.create(
Hello world
)
.toJSON()
expect(tree).toHaveStyleRule('font-size', '4rem')
expect(tree).not.toHaveStyleRule('color', 'hotpink')
})
```
Credit
This was inspired by and relies almost entirely on work by jest-emotion
which was largely inspired by jest-glamor-react.
LICENSE
MIT
