проверка отображения компонента без установки состояния в ферменте - с использованием fetch

Question

Я пытаюсь запустить основное приложение, я вызываю API, который работает на уровне узла.я использую прокси в package.json приложения реакции, поэтому я вызываю fetch с относительным URL.

узел работает в порту 4000, а реакция работает в 3000.

поэтому, когда я вызываюпосле успешного завершения API я изменю состояние загрузки на false, первоначально, когда запрос вызова API будет происходить, загрузчик придет, так как загрузка верна после того, как DataComponent придет в случае успеха.

По сути, начальная загрузка будет ложной после установки ответазначение false, чтобы загрузить DataComponent

Здесь я не могу увидеть DataComponent, Как я могу проверить, что DataComponent отображается.

// app.js

class App extends Component {
  state = {
    loading: true,
    data: null
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async() => {
    const jsonRes = await fetch("/api/user");
    const data = await jsonRes.json();
    this.setState({
      loading: false,
      data
    })
  }

  render() {
    if (this.state.loading) {
      return ( <
        div className = "laoder-container" > < Loader / > < /div>
      )
    } else {
      return ( <
        DataComponent data = {
          this.state.data
        }
        />
      )
    }
  }
}


//app.test.js
import React from 'react'
import App from './App';
import {
  mount
} from 'enzyme'

describe('app.js', () => {
  it('should render the app component once data is there', () => {
    global.fetch = jest.fn().mockImplementation(() => {
      var p = new Promise((resolve, reject) => {
        resolve({
          ok: true,
          json: function() {
            return {
              userName: 'John',
              surName: 'Doe'
            }
          }
        });
      });

      return p;
    });
  })

  const wrapper = mount( < App / > )
  expect(fetch).toBeCalled();
  wrapper.update();
  console.log(wrapper.debug()) // not showing the Data component

})

Answer 1

Проблема в том, что выборка происходит асинхронно.К тому времени, когда вы вызываете wrapper.debug(), состояние уже не может быть обновлено, поскольку в стек событий был добавлен ответ fetch.Таким образом, fetch был назван , но он не дал никакого ответа.

Это можно увидеть, обновив тест до следующего вида:

// mock out fetch...
const wrapper = mount(<App />);
expect(fetch).toBeCalled();
setTimeout(() => {
  wrapper.update();
  console.log(wrapper.debug()); // should be showing the Data component now
}, 0);

Это позволяет вызывать обратные вызовы обещания перед попыткой увидеть обработанную разметку, поместив код обновления / отладки в конец стека событий.

Вы можете обернуть это setTimeout в обещании вернуться из функции обратного вызова it и поместить любую expects в нее перед вами resolve (в противном случае он может фактически никогда не запустить функции expect до завершения теста).

// mock out fetch...
const wrapper = mount(<App />);
expect(fetch).toBeCalled();
return new Promise((resolve) => {
  setTimeout(() => {
    wrapper.update();
    console.log(wrapper.debug()); // should be showing the Data component now
    expect(...)
    resolve();
  }, 0);
});

---

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

it("should render the app component once data is there", () => {
  const wrapper = shallow(<App />);
  wrapper.setState({
    loading: false,
    data: {
      userName: "John",
      surName: "Doe"
    }
  });
  console.log(wrapper.debug()); // You'll see the DataComponent
});