React-Redux component test fails when using async actions - reactjs

Question

I'm trying to test react-redux connected app which is having aync action to fetch data from API. But the test fails for some reason. what wrong i'm doing here?
AssertionError: expected { length: 0 } to have a length of 1 but got 0
posts.js(Redux Action)
import instance from "./../config/axiosconfig";
export const postList = () => {
return dispatch => {
return instance.get("/posts")
.then(res => {
const posts = res.data;
return dispatch({
type: "POST_LIST", posts
});
});
};
};
posts.js(React Component)
import React, { Component } from "react";
import { connect } from "react-redux";
import {postList} from "../actions/posts";
import PropTypes from "prop-types";
class Post extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
if (this.props.posts === undefined || this.props.posts.length === 0) {
const {dispatch} = this.props;
dispatch(postList());
}
}
render() {
let postLists = "";
if (this.props.posts) {
postLists = this.props.posts.map((list, i) => (
<li key = {i}>
{list.title}
</li>
));
}
return (
<div>
<h2>About</h2>
<p>Services</p>
<ol className="post-list">
{postLists}
</ol>
</div>
);
}
}
Post.propTypes = {
posts: PropTypes.array,
dispatch: PropTypes.func
};
const mapDispatchToProps = (dispatch) => ({ dispatch });
const mapStateToProps = (state) => {
return { posts: state.PostReducer ? state.PostReducer.posts : [] };
};
export default connect(mapStateToProps, mapDispatchToProps)(Post);
Post.test.js(Test for component)
import React from "react";
import Post from "client/components/post";
import { Provider } from 'react-redux';
import PostReducer from "client/reducers/posts";
import {mount, render, shallow} from 'enzyme'
import instance from "client/config/axiosconfig";
import { expect } from "chai";
import moxios from "moxios";
import { createStore, applyMiddleware, combineReducers } from 'redux';
import configureStore from "redux-mock-store";
import thunkMiddleware from "redux-thunk";
let store;
let wrapper;
describe("Post Component", () => {
beforeEach(() => {
moxios.install(instance);
});
afterEach(() => {
moxios.uninstall(instance);
});
it("has expected posts lists listed", async () => {
store = setupStore();
const payload = [{
body: "TEST",
id: 1,
title: "Test Title"
}];
moxios.wait(() => {
const request = moxios.requests.mostRecent();
request.respondWith({
status: 200,
response: payload
});
});
wrapper = mount(<Provider store={store}><Post/></Provider>);
expect(wrapper.find('.post-list li')).to.have.length(1);
});
function setupStore() {
return createStore(
combineReducers({ PostReducer }),
applyMiddleware(thunkMiddleware)
);
}
});

Answer 1

The request which you have stubbed may still be pending by the time make an assertion.
Try the following:
it("has expected posts lists listed", async () => {
store = setupStore();
const payload = [{
body: "TEST",
id: 1,
title: "Test Title"
}];
const promise = moxios.wait(() => {
const request = moxios.requests.mostRecent();
request.respondWith({
status: 200,
response: payload
});
});
const wrapper = mount(<Provider store={store}><Post/></Provider>);
await promise;
wrapper.update(); // May not be necessary
expect(wrapper.find('.post-list li')).to.have.length(1);
});