@-ui/jest 中文文档教程

Question

---

@-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

麻省理工学院