javascript - enzyme 安装测试因 redux 存储状态更新而失败

Question

我有一个带有按钮的简单组件，按下该按钮时会从占位符 API 获取评论 JSON。

尽管我可以看到 CommentList 组件中的状态正在更新，但我使用 mount() 进行的 enzyme 测试失败了。我在浏览器中的手动测试可以很好地显示注释。我对安装和模拟商店的测试通过了。如果我在 CommentList 中 debug 或 console.log，我什至可以看到创建了 2 个 li 元素。redux 状态更改后，mount 中的 View 似乎没有更新吗？

对下面的代码量表示歉意，我不确定哪一部分是罪魁祸首。该项目可以从 https://github.com/Hyllesen/react-tdd 克隆

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

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

reducers/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 请求 stub 引起的。我认为您需要等待返回响应，然后再在 wrapper 上调用 update()。

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