Как издеваться над запросом-обещанием-нативным для модульных тестов компонентов React?

Пакеты: Jest, Enzyme (и Nock, которые не работали).

У меня есть следующий компонент React:

import ...

const request = require('request-promise-native');

class SomeSearchContainer extends Component {

  constructor(props) {
    super(props);
    this.state = {
      ...
    };
  };

  onResponse = (response) => {
    const { var1, var2 } = response;
    if (var1) {
      this.setState(...)
    }
  };

  onSubmit = (event) => {
    const someId = this.props.someId;
    if (someId.length === 4) {
      request(
        {
          uri: `${location.href}api/${someId}`,
          json: true,
        }).then(this.onResponse)
        .catch(this.props.onResponseError);
    } else {
      this.setState(...)
    }
  };

  render() {
    return (
      <button id="btn-search" onClick={this.onSubmit}>Search</button>
    );
  }
}

export default SomeSearchContainer;

Я пытаюсь реализовать для этого модульный тест, поэтому я хотел бы издеваться над запросом-обещанием-native и assert, что этап изменился соответствующим образом в зависимости от результата (onResponse).

В идеале я хотел бы выполнить неглубокую визуализацию компонента, смоделировать событие щелчка и подтвердить, что состояние изменилось (соответственно).

Я пробовал разные способы, но либо мой тест не ожидает запроса на возврат, либо я не могу имитировать запрос.

Могли бы вы, пожалуйста, посоветовать ?


reactjs unit-testing jestjs mocking request-promise
person Snake_A    schedule 30.01.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Согласно этому примеру из документации, я думаю вы, вероятно, захотите сделать что-то вроде:

Сначала создайте файл в __mocks__/request-promise-native.js, который будет имитировать некоторые образцы данных, которые будут возвращены по вашему запросу. Это выглядело бы примерно так:

// __mocks__/request-promise-native.js

const rpn = jest.genMockFromModule('request-promise-native');

const request = opts => new Promise((resolve, reject) => {
  resolve(`{
    var1: true,
    var2: "foo"
  }`);
});

rpn.request = request;

module.exports = rpn;

Обратите внимание, что папка __mocks__ должна находиться в корне вашего проекта в том же каталоге, что и node_modules.

Затем вы можете просто написать и запустить свои тесты, как и для любого другого компонента React. Когда выполнение теста доходит до той части, где обычно используется библиотека request-promise-native, ваша имитация версии будет автоматически заменена, а переменная response получит то значение JSON, которое вы установили в своем макете.

Обратитесь к документации выше, если вы хотите немного более сложное поведение, например если вы хотите также проверить случай reject(). В этом случае вы, вероятно, захотите отделиться от всего, что передано в параметре opts, чтобы выбрать, выполнять ли resolve() или reject().

person morphatic    schedule 18.02.2018
comment
В этом примере библиотеки request-promise-native, возможно, это не лучшее решение. Судя по его (исходному коду) [github.com / request / request-prom-native / blob / master / lib / экспортирует только request функцию. Поэтому, если вы хотите использовать сопоставители типа .toHaveBeenCalled*(), у вас возникнут проблемы, поскольку тип rpn будет function rpn вместо function. Альтернативный вариант, который я предлагаю: `` jest.genMockFromModule ('request-prom-native'); const request = jest.fn (() = ›{}); module.exports = запрос; `` И установите фиктивное значение с помощью rp.mockReturnValueOnce(mockValue) - person Bence László; 30.06.2020