Javascript 酶装载测试因redux存储状态更新而失败

我有一个带有按钮的简单组件，当按下按钮时，从占位符API获取注释JSON

尽管我可以看到CommentList组件中的状态正在更新，但我的mount酶测试失败。 我在浏览器中的手动测试可以很好地显示注释。 我对坐骑和模拟商店的测试通过了。 如果我在CommentList中调试或登录console.log，我甚至可以看到创建了2个li元素。 在redux状态更改后，视图似乎没有在mount中更新吗

抱歉，下面的代码太多了，我不确定哪部分是罪魁祸首。该项目可以从中克隆

integration.test.js失败测试

reducers/comments.js

reducers/index.js

CommentList.test.js使用模拟存储通过测试

---

看起来您的问题是由您的moxios请求存根引起的。我认为在调用包装器上的更新之前，您需要等待响应返回

---

哈利朱杰！！我已经为此奋斗了一天，谢谢你在几分钟内迅速做出回应！不用担心，乐意帮忙

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);
});

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>;
};

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);

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
  };
}

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;
  }
}

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

export default combineReducers({
  comments: commentsReducer
});

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");
});

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()
      })
  })
})