使用动态 ID 响应 Jest 快照测试

Question

我在执行快照测试时遇到附加错误。该错误主要是针对剑道控件的下拉菜单和日期选择器。

请帮忙。

Answer 1

如果ID是动态生成的，比如UUID，那么如果是由组件生成的，它总是会不同，所以你的快照测试总是会失败。

相反，您应该在组件外部生成 ID 并将其作为 prop 传入。这样您就可以在测试中对该道具进行硬编码，确保它在测试运行之间保持一致。

如果需要，您仍然可以在组件内生成 ID，但仅在未传入 ID 的情况下才这样做。因此，如果传入了 ID，请使用该 ID，否则生成 ID。

例如：

import React, {Component} from 'react';
import {v4} from 'uuid';

export default class MyComponent extends Component {
  constructor(props) {
    super(props);
    let id = props.id;
    if (!id) {
      id = v4();
    }
    this.state = {
      id: id
    }
  }
  render() {
    return (
      <div id={this.state.id}>
      <div>
    );
  }
}

显然，确切的代码将取决于您使用的 UUID 库（我使用的是那个uuid）。然后，在您的测试中，显式地将 id 作为 prop 传递，如下所示：

<MyComponent id="foo" />

对于生成 ID 或其他动态内容的用例，可以允许其匹配它们。文档给出了这个例子：

it('will check the matchers and pass', () => {
  const user = {
    createdAt: new Date(),
    id: Math.floor(Math.random() * 20),
    name: 'LeBron James',
  };

  expect(user).toMatchSnapshot({
    createdAt: expect.any(Date),
    id: expect.any(Number),
  });
});

虽然这没有给出在 React 组件的上下文中使用它的具体示例，但它确实说明了它可以使用动态值来完成。但是，如果您可以显式传递值而不是让组件中的某些内容生成它们，那么会容易得多。