Мокинг константы класса в Jest

Question

Скажем, у меня есть компонент ниже, который устанавливает константу this.MAX_LENGTH в конструкторе.

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

class Input extends React.Component {
  static propTypes = {
    value: PropTypes.string.isRequired
  };

  constructor(props) {
    super(props);

    // An example constant
    this.MAX_LENGTH = 1024;
  }

  render() {
    
    return (
      <label htmlFor="comment_body">
        <textarea
          className="comment-reply input-highlight-on-focus"
          type="input"
          name="comment[body]"
          id="comment_body"
          maxLength={this.MAX_LENGTH}
          value={this.props.value} />
      </label>
    )
  }

}

export default Input;

Константа MAX_LENGTH используется для установки максимальной длины textarea.

В моих спецификациях Jest я хочу имитировать значение this.MAX_LENGTH, но я не уверен, как установить этот макет.

Вот как выглядит мой тест Jest ( он использует chai и enzyme в качестве помощников при тестировании):

it('renders the textarea', () => {
  // Mock the constant here to set a custom value of 99
  // ????

  const wrapper = mount(<Input value={'foo'} />)
  const textarea = wrapper.find('.comment-reply').first();

  expect(textarea).to.have.attr('maxLength', '99');
});

Что я могу заменить ???? на имитацию значения константы?

Я пробовал прочитать ES6 Class Mocks в документации Jest, но похоже, что это было насмешку над всем импортированным классом, и я не уверен, как это применимо к одной константе.

Спасибо!

Answer 1

Использование свойств экземпляра для констант считается плохой практикой; это то, для чего нужны свойства stati c. Это можно было бы смоделировать как Input.MAX_LENGTH = ... перед монтированием компонента:

class Input extends React.Component {
  static MAX_LENGTH = 1024;
  ...
}

Исходное значение необходимо восстановить в afterEach.

Или, по крайней мере, сделать его прототипом только для чтения свойство. Это можно было бы имитировать как jest.spyOn(Input, 'MAX_LENGTH', 'get').mockReturnValue(...) перед монтированием компонента:

class Input extends React.Component {
  get MAX_LENGTH() { return 1024 };
  ...
}

Без этого его нужно было бы имитировать в экземпляре компонента после первоначального рендеринга:

const wrapper = mount(<Input value={'foo'} />)
wrapper.instance().MAX_LENGTH = ...;
wrapper.setProps({});
...