Как проверить компонент с операцией выборки в ReactionJS - PullRequest
0 голосов
/ 25 сентября 2019

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

import React, { Component } from 'react';

export class SomeComponent extends Component {
  constructor() {
    super();

    this.state = {
      firstName: '',
      lastName: '',
      isDone: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  public render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            firstName:
            <input
              type="text"
              name="firstName"
              placeholder="enter your first name"
              value={this.state.firstName}
              onChange={this.handleInputChange}
            />
          </label>
          <label>
            lastName:
            <input
              type="text"
              name="lastName"
              placeholder="enter your last name"
              value={this.state.lastName}
              onChange={this.handleInputChange}
            />
          </label>
          <div>
            <input type="submit" value="Submit" />
          </div>
        </form>
      </div>
    );
  }

  private handleInputChange(event) {
    const target = event.target;
    const name = target.name;
    const value = target.value;

    this.setState({ [name]: value });
  }

  private handleSubmit(event) {
    event.preventDefault();

    this.setState({ isDone: true });

    const nameMatch = () => {
      return !(this.state.firstName.match('^Cel.*') && this.state.firstName.endsWith('on'));
    };

    if (nameMatch()) {
      alert('Please enter a valid name');
      return;
    }

    if (!this.state.lastName.endsWith('on')) {
      alert('check lastname too');
      return;
    }
    this.getFullName();
  }

  private getFullName() {


    const params = {
      firstName: this.state.firstName,
      lastName: this.state.lastName
    };

    const urlendPoint = `https://github.com/`;

    // (urlendPoint as any).search = new URLSearchParams(params);

    fetch(urlendPoint)
      .then(response => response.json())
      .then(data => data)
      .catch(error => {
        alert('Please check the names and try again');
      });

   ...do something...
  }
}

в рамках модульного тестирования. В реакции с использованием Jest и энзима у меня есть следующий тестовый пример

it('should fetch data correctly', (done) => {
            fetch.mockResponseOnce(JSON.stringify([]));
 let wrapper = shallow(<SomeComponent />).instance();
  expect(wrapper.state.fullName).toEqual([]);
});

Здесь япопытка смоделировать операцию извлечения и протестировать определенную функцию getfullName ().

При этом я получаю ошибку Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.

Я не понимаю, что происходит не так.Как я должен издеваться над функцией так, чтобы я издевался над выборкой и проверял ее?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...