在 react redux 应用程序中使用 jest 模拟浅渲染的承诺

Question

我查看了以下教程 https://hackernoon.com/unit-testing-redux-connected-components-692fa3c4441c https://airbnb.io/enzyme/docs/api/shallow.html 并尝试创建组件的浅渲染测试，但我在渲染时触发了一些操作，这些操作收集数据并帮助渲染组件。我怎么能嘲笑这个？

tests/jest/containers/homecontent.js

import configureStore from 'redux-mock-store'
import { shallow } from 'enzyme';
import { HomeContent } from '../../../app/containers/home';
const passMetaBack = meta => {
        this.setState({
            title: 'test',
            description: 'test'
        });
    };

// create any initial state needed
const initialState = {};
// here it is possible to pass in any middleware if needed into //configureStore
const mockStore = configureStore();

describe('Login Component', () => {
    let wrapper;
    let store;
    beforeEach(() => {
        // our mock login function to replace the one provided by mapDispatchToProps
        const mockLoginfn = jest.fn();
        //creates the store with any initial state or middleware needed
        store = mockStore(initialState)
        wrapper = shallow(<HomeContent isGuest={false} isReady={true} priv={{}} passMetaBack={passMetaBack} fetchContents={mockLoginfn} />)
    });

    it('+++ render the DUMB component', () => {
        expect(wrapper.length).toEqual(1)
    });
});

我得到的错误是

 FAIL  tests/jest/containers/homecontent.test.js
  Login Component
    ✕ +++ render the DUMB component (25ms)

  ● Login Component › +++ render the DUMB component

    TypeError: Cannot read property 'then' of undefined

      38 |              if(this.props.isReady && this.props.priv != undefined){
      39 |              let self = this;
    > 40 |              this.props.fetchContents()
      41 |              .then(response => {
      42 |                      let data = response.payload.data;
      43 |                      if (data.header.error) {

      at HomeContent.initData (app/containers/home.js:40:7)
      at HomeContent.render (app/containers/home.js:71:12)
      at ReactShallowRenderer._mountClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:195:37)
      at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:143:14)
      at node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:287:35
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/build/Utils.js:103:16)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:286:68)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:119:22)
      at shallow (node_modules/enzyme/build/shallow.js:19:10)
      at Object.<anonymous> (tests/jest/containers/homecontent.test.js:24:19)

  ● Login Component › +++ render the DUMB component

    TypeError: Cannot read property 'length' of undefined

      26 |
      27 |     it('+++ render the DUMB component', () => {
    > 28 |         expect(wrapper.length).toEqual(1)
      29 |     });
      30 | });
      31 |

      at Object.<anonymous> (tests/jest/containers/homecontent.test.js:28:24)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.218s
Ran all test suites matching /tests\/jest\/containers\/homecontent.test.js/i.

this.props.fetchContents() 来自组件上的操作

Answer 1

mockLoginfn 在组件中用作this.props.fetchContents。 fetchContents 是一个返回 promise 的函数，而 mockLoginfn 是一个不返回任何内容的笑话模拟函数。

因此，您需要为mockLoginfn 提供一个模拟实现，使其表现得像一个承诺。例如（使用上面的代码sn-p）：

const mockLoginfn = jest.fn();
mockLoginfn.mockImplementation(() => Promise.resolve({
  payload: {
    data: {
      header: {
        error: 'some error'
      }
    }
  }
}));