模拟函数的返回值没有`then`属性

Question

I have the following async call in one of my React components:

onSubmit = (data) => {
    this.props.startAddPost(data)
        .then(() => {
            this.props.history.push('/');
        });
};

The goal here is to redirect the user to the index page only once the post has been persisted in Redux ( startAddPost is an async action generator that sends the data to an external API using axios and dispatches another action that will save the new post in Redux store; the whole thing is returned, so that I can chain a then call to it in the component itself). It works in the app just fine, but I'm having trouble testing it.

import React from 'react';
import { shallow } from 'enzyme';

import { AddPost } from '../../components/AddPost';
import posts from '../fixtures/posts';

let startAddPost, history, wrapper;

beforeEach(() => {
    startAddPost = jest.fn();
    history      = { push: jest.fn() };
    wrapper      = shallow(<AddPost startAddPost={startAddPost} history={history} />);
});

test('handles the onSubmit call correctly', () => {
    wrapper.find('PostForm').prop('onSubmit')(posts[0]);

    expect(startAddPost).toHaveBeenLastCalledWith(posts[0]);
    expect(history.push).toHaveBeenLastCalledWith('/');
});

So I obviously need this test to pass, but it fails with the following output:

● handles the onSubmit call correctly

TypeError: Cannot read property 'then' of undefined

at AddPost._this.onSubmit (src/components/AddPost.js:9:37)
at Object.<anonymous> (src/tests/components/AddPost.test.js:25:46)
at process._tickCallback (internal/process/next_tick.js:109:7)

So how can I fix this? I suspect this is a problem with the test itself because everything works well in the actual app. Thank you!

Answer 1

Your code is not testable in the first place. You pass in a callback to the action and execute it after saving the data to the database like so,

export function createPost(values, callback) {
  const request = axios.post('http://localhost:8080/api/posts', values)
    .then(() => callback());

  return {
    type: CREATE_POST,
    payload: request
  };
}

The callback should be responsible for the above redirection in this case. The client code which uses the action should be like this.

  onSubmit(values) {
    this.props.createPost(values, () => {
      this.props.history.push('/');
    });
  }

This makes your action much more flexible and reusable too.

Then when you test it, you can pass a stub to the action, and verify whether it is called once. Writing a quality, testable code is an art though.

Answer 2

The problem with your code is that the startAddPost function is a mock function which does not return a Promise , but your actual this.props.startAddPost function does return a Promise .

That's why your code works but fails when you try to test it, leading to the cannot read property.... error.

To fix this make your mocked function return a Promise like so -

beforeEach(() => {
    startAddPost = jest.fn().mockReturnValueOnce(Promise.resolve())
    ...
});

Read more about mockReturnValueOnce here .