React Jest Snapshot с динамическим идентификатором

Question

Я сталкиваюсь с прикрепленной ошибкой во время тестирования снимка. Ошибка в основном для выпадающего и DatePicker элементов управления кендо.

Пожалуйста, помогите.

Answer 1

Передайте ваш идентификатор как реквизит от родительского компонента и defaultProps, чтобы присвоить вашему идентификатору значение по умолчанию, чтобы значение не менялось при выполнении теста.

В приведенном ниже примереваш идентификатор всегда будет равен 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

Answer 2

Если идентификатор генерируется динамически, например, UUID, он всегда будет другим, если генерируется компонентом, поэтому проверка моментальных снимков всегда будет неудачной.

Вместо этого вы должны сгенерировать идентификатор вне компонента и передать его в качестве реквизита. Таким образом, вы можете жестко написать код, который будет поддерживать тест, чтобы он оставался согласованным между запусками теста.

Вы все еще можете сгенерировать идентификатор внутри компонента, если вам нужно, но сделать это можно только в том случае, если он не был передан. Поэтому, если идентификатор передан, используйте его, в противном случае создайте его.

Например:

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 как реквизит:

<MyComponent id="foo" />

Для случаев использования, когда генерируются идентификаторы или другое динамическое содержимое, можно разрешить ему совпадать с ними. Документация приводит этот пример:

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, оно иллюстрирует, что это может быть сделано с динамическими значениями. Однако гораздо проще, если вы можете передавать значения явно, а не генерировать их в компоненте.