reactjs - 使用动态 ID 进行 React Jest Snapshot 测试

Question

我在执行快照测试时遇到附加错误。该错误基本上是针对剑道控件的下拉列表和日期选择器。

请帮忙。

Answer 1

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

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

如果需要，您仍然可以在组件内部生成 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 组件的上下文中使用 this 的具体示例，但它确实说明了它可以使用动态值来完成。但是，如果您可以显式地传递值而不是让组件中的某些东西生成它们，则要容易得多。