使用 react-test-renderer 的玩笑测试正在将未定义的属性值插入 DOM

Question

我曾短暂地尝试在 react-test-renderer 源代码中找到它，但找不到。

回想一下，在 React 中，值为 undefined 的组件元素属性不会在 DOM 中呈现。即，给定 bat = undefined 和 <Foo bar={bat} />，bar 属性将不会出现在生成的 HTML.

中

我假设这是预期的行为，但我很困惑为什么当可选组件属性出现在 Jest 快照的 JSON 树中时 - 除非快照只是确认属性未指定（ws-automation-id 是可选组件属性，未定义 defaultProps 条目）：

exports[`the <TextButton/> component should use the specified class names 1`] = `
<button
  className="gc-icon test-class1 test-class2"
  onClick={[Function]}
  ws-automation-id={undefined}
>
  Button Text
</button>
`;

给定

test('should use the specified class names', () => {
  const tree = create(<TextButton buttonText="Button Text" onClick={null} classNames={['test-class1', 'test-class2']} />).toJSON()
  expect(tree).toMatchSnapshot()
})

Answer 1

这是预期的。

Essentially, this package makes it easy to grab a snapshot of the platform view hierarchy (similar to a DOM tree) rendered by a React DOM or React Native component without using a browser -- React Test Renderer

它不完全是您在浏览器中看到的 DOM 树，而是代表类似事物的 javascript 对象。

Answer 2

我忽略了 post 原始 post 时使用的版本。此问题已修复，但具体版本尚不清楚。

使用 react-test-renderer 的玩笑测试正在将未定义的属性值插入 DOM

Jest test using react-test-renderer is inserting undefined attribute value into the DOM

jestjs

react-test-renderer