使用动态ID进行Jest快照测试

Question

执行快照测试时，我面临附加错误。该错误基本上是因为剑道控件的下拉菜单和日期选择器。

请帮助。

Answer 1

我解决这个问题的方法是使用 Jest Property Matchers，所以你可以期待任何字符串。这样，动态字符串仍然会通过。

如果没有来自 OP 的代码示例，就不可能提出具体的实现建议，但从测试的角度来看，这比尝试将 UUID 注入到每个需要它的组件中要容易得多。

Answer 2

如果ID是动态生成的（例如UUID），则组件生成的ID总是不同的，因此快照测试将始终失败。

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

如果需要，您仍然可以在组件内部生成ID，但是只有在未传入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作为道具明确传递给ID：

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

Answer 3

通过父组件和defaultProps向您传递ID作为道具，以为您的ID提供默认值，以便在运行测试时该值不会更改。

在下面的示例中，运行测试时，您的ID将始终为1：

import React from 'react'
import PropTypes from 'prop-types'

const AwesomeComponent = props => {
   const {id} = props.id 
   return <p>My Id is: {id}</p>
}

AwesomeComponent.propTypes = {
   id: PropTypes.number
}

AwesomeComponent.defaultProps = {
    id: 1
}

export default AwesomeComponent