Как обновить макет хранилища в Redux для проверки сгенерированного числа <li>с в компоненте?

Question

Я работаю над простым приложением Reaction-Redux, чтобы познакомиться с тестированием React-Redx, и у меня есть приложение с текстовой областью и двумя кнопками.Кнопка «Добавить комментарий» добавляет комментарий из текстовой области в список, а кнопка «Получить комментарии» добавляет к списку комментарии, поступающие от поддельного API jsonplaceholder.

Чего я хочу добиться: я имитирую событие click, высмеиваю поддельное получениеВызов API, а затем я хотел бы как-то, вероятно, обновить хранилище, если я не ошибаюсь, так как комментарии заполняются и в конечном итоге создаются lis во время теста.

Вот что я пробовал до сих пор:

integra.test.js

import React from 'react'
import { mount } from 'enzyme'
import Root from 'Root'
import App from 'components/App'
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
import configureMockStore from 'redux-mock-store'

const mock = new MockAdapter(axios)

const mockStore = configureMockStore()
// const store = mockStore({})
let wrapped, store

beforeEach(() => {
    wrapped = mount(
        <Root initialState={store}>
            <App />
        </Root>
    )
})

afterEach(() => {
})

it('can fetch a list of comments and display them', () => {


    wrapped.find('.fetch-comments').simulate('click')

    mock.onGet('http://jsonplaceholder.typicode.com/comments').reply(200, {
        comments: [{ name: 'Fetched #1' }, { name: 'Fetched #2' }]
    })

    axios.get('http://jsonplaceholder.typicode.com/comments')
        .then(response => {
            store = response.data.comments
            console.log(store)
            wrapped.update()
            console.log(wrapped.find('li').length)
            expect(wrapped.find('li').length).toEqual(2)
        })
})

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

Answer 1

В конце концов, кажется, что по какой-то причине не было необходимости использовать фиктивное хранилище с избыточностью, хотя кто-то ожидал, что для выполнения ложного вызова API потребуется обновить поддельное хранилище, передав поддельные извлеченные данные как props.commentsв этом конкретном случае.Использование moxios и done до it's function в качестве аргумента и done() после того, что ожидается, дает желаемый пример.

import React из "реакции";импорт из "энзима";импорт моксиос из "моксиос";импортировать Root из "../Root";Импортировать приложение из "../components/App";

beforeEach(() => {
  moxios.install();
  moxios.stubRequest("https://jsonplaceholder.typicode.com/comments", {
    status: 200,
    response: [{ name: "Fetched #1" }, { name: "Fetched #2" }]
  });
});

afterEach(() => {
  moxios.uninstall();
});

it("can fetch a list of comments and display them", done => {
  const wrapped = mount(
    <Root>
      <App />
    </Root>
  );

  wrapped.find(".fetch-comments").simulate("click");

  moxios.wait(() => {
    let request = moxios.requests.mostRecent();
    request
      .respondWith({
        status: 200,
        response: [
          {
            name: "Fetched #1"
          },
          {
            name: "Fetched #2"
          }
        ]
      })
      .then(() => {
        wrapped.update();
        console.log(wrapped.html());
        expect(wrapped.find("li").length).toEqual(2);
        done();
        wrapped.unmount();
      });
  });
});

Я также обновил demo на случай, если кто-то захочет увидеть пример.