Сбой проверки ферментного монтирования с обновлением состояния хранилища

Question

У меня есть простой компонент с кнопкой, который при нажатии извлекает комментарии JSON из API-заполнителя.

Мой ферментный тест с mount () не проходит, хотя я вижучто состояние обновляется в компоненте CommentList.Мои ручные тесты в браузере отображают комментарии нормально.Мой тест с креплением и макетом магазина проходит.Я даже вижу, что 2 элемента li создаются, если я отлаживаю или console.log в CommentList.Похоже, что представление не обновляется в монтировании после изменения состояния избыточности?

Извинения за количество кода ниже, я не уверен, какая часть является виновником.Проект может быть клонирован из https://github.com/Hyllesen/react-tdd

integra.test.js (не пройден тест)

import React from "react";
import { mount } from "enzyme";
import Root from "Root";
import CommentList from "components/CommentList";
import moxios from "moxios";

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

it("can fetch a list of comments and display them", () => {
  //Render entire app
  const wrapped = mount(
    <Root>
      <CommentList />
    </Root>
  );
  //Find fetchComments button and click it
  wrapped.find(".fetch-comments").simulate("click");
  wrapped.update();
  //Expect to find a list of comments
  expect(wrapped.find("li").length).toBe(2);
});

Root.js

import React from "react";
import { Provider } from "react-redux";

import { createStore, applyMiddleware } from "redux";
import reducers from "reducers";
import reduxPromise from "redux-promise";

export default ({
  children,
  store = createStore(reducers, {}, applyMiddleware(reduxPromise))
}) => {
  return <Provider store={store}>{children}</Provider>;
};

CommentList.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchComments } from "actions";

class CommentList extends Component {
  renderComments() {
    console.log(this.props.comments);
    return this.props.comments.map(comment => <li key={comment}>{comment}</li>);
  }

  render() {
    const comments = this.renderComments();
    //This is actually creating 2 li elements in the test
    console.log("render", comments); 
    return (
      <div>
        <button className="fetch-comments" onClick={this.props.fetchComments}>
          Fetch comments
        </button>
        <ul>{comments}</ul>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { comments: state.comments };
}

export default connect(
  mapStateToProps,
  { fetchComments }
)(CommentList);

actions / index.js

import { FETCH_COMMENTS } from "actions/types";
import axios from "axios";

export function fetchComments() {
  const response = axios.get("http://jsonplaceholder.typicode.com/comments");
  return {
    type: FETCH_COMMENTS,
    payload: response
  };
}

редукторы /comments.js

import { FETCH_COMMENTS } from "actions/types";

export default function(state = [], action) {
  switch (action.type) {
    case FETCH_COMMENTS:
      const comments = action.payload.data.map(comment => comment.name);
      return [...state, ...comments];
    default:
      return state;
  }
}

redurs / index.js

import { combineReducers } from "redux";
import commentsReducer from "reducers/comments";

export default combineReducers({
  comments: commentsReducer
});

CommentList.test.js (прохождение теста с использованием фиктивного магазина)

import React from "react";
import { mount } from "enzyme";
import Root from "Root";
import CommentList from "components/CommentList";
import createMockStore from "utils/createMockStore";

let wrapped, store;

beforeEach(() => {
  const initialState = {
    comments: ["Comment 1", "Comment 2"]
  };
  store = createMockStore(initialState);
  wrapped = mount(
    <Root store={store}>
      <CommentList />
    </Root>
  );
});

afterEach(() => {
  wrapped.unmount();
});

it("Creates one li per comment", () => {
  expect(wrapped.find("li").length).toBe(2);
});

it("shows text for each comment", () => {
  expect(wrapped.render().text()).toEqual("Fetch commentsComment 1Comment 2");
});

Answer 1

Похоже, что ваша проблема вызвана заглушкой запроса moxios.Я думаю, вам нужно подождать, пока ответ не будет возвращен, прежде чем звонить update() на ваш wrapper.

beforeEach(() => {
  moxios.install()
})

it('can fetch a list of comments and display them', done => {
  // Render entire app
  const wrapped = mount(
    <Root>
      <CommentList />
    </Root>
  )
  // Find fetchComments button and click it
  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(function () {
        wrapped.update()
        expect(wrapped.find('li').length).toBe(2)
        done()
      })
  })
})