jest.fn() 值必须是模拟函数或 spy 接收函数：[Function getTemplates]

Posted 2023-02-22

【中文标题】jest.fn() 值必须是模拟函数或 spy 接收函数：[Function getTemplates]

【英文标题】：jest.fn() value must be a mock function or spy received function: [Function getTemplates]

【发布时间】：2018-11-08 02:26:16

【问题描述】：

我在模块中有一个名为 handlelistOfTemplates 的函数，它调用另一个文件中定义的动作。我想测试一下何时调用 handlelistOfTemplates 操作文件中的函数是否使用正确的参数调用。

我的容器组件：

import React from 'react';
import  connect  from 'react-redux';
import bindActionCreators from 'redux';

import * as getData from '../../services/DataService';

class Container extends React.Component 

    constructor(props)
        super(props) 
        this.props.actions.getTemplates(1);
        this.state = 
            value: 1
        

    

    handlelistOfTemplates = (template, index, value) => 
        this.props.selectedTemplate(template);
        this.setState( value );
        this.props.actions.getTemplates(template);
    ;

    componentDidMount() 
    

    render() 
        return(

                <ListOfTemplates listOfTemplates=this.props.listOfTemplates value=this.state.value onChange=this.handlelistOfTemplates/>
            );
    

function mapStateToProps(state) 
    return 
        listOfTemplates: state.listOfTemplates
    

function mapDispatchToProps(dispatch) 
    return 
    actions: bindActionCreators(getData, dispatch)
    ;
   
module.exports = connect(mapStateToProps, mapDispatchToProps)(Container);

还有我的测试：

import React from 'react';
import sinon from 'sinon';
import expect from 'expect';
import  shallow  from 'enzyme';
import PropTypes from 'prop-types';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import  createMockStore, createMockDispatch  from 'redux-test-utils';

import Container from './Container';
const shallowWithStore = (component, store) => 
    const context = 
        store,
        muiTheme: getMuiTheme(),
    ;

    const childContextTypes = 
        muiTheme: React.PropTypes.object.isRequired,
        store: PropTypes.object.isRequired
    
    return shallow(component,  context, childContextTypes );
;
let store;
const loadComponent = (testState) => 

    const props = 
        actions: 
            getTemplates: () => return Promise.resolve()
        
    
    store = createMockStore(testState)
    return shallowWithStore(<Container ...props/>, store);


const getFakeState = () => 
    return 
        listOfTemplates: [],

    ;


describe('Container', () => 
    let testState, component;


    describe("when Appeal template is selected from select template dropdown", () => 
        beforeAll(() => 
            testState = getFakeState();
            component = loadComponent(testState);

        );

        fit('should update the content in editor', (done) => 
            component.dive().find('ListOfTemplates').props().onChange('Appeal', 1, 2);
            component.update();
            done();
            expect(component.dive().state().value).toEqual(2) // error value still is at 1
expect(component.instance().props.actions.getTemplates).toHaveBeenCalled();

        );
    );
);

当我运行上述测试时，出现以下错误。

expect(jest.fn())[.not].toHaveBeenCalled()

    jest.fn() value must be a mock function or spy.
    Received:
      function: [Function getTemplates]

我应该运行其他什么来让它工作吗？可能是我的模拟不正确。

即使我尝试这样做： jest.spyon(component.instance().props.actions, 'getTemplates');在期望错误保持不变之前。

另外，当我检查组件的本地状态是否已被修改时。我没有得到更新的状态。 当我打电话给component.dive().find('ListOfTemplates').props().onChange('Appeal', 1, 2);

component.dive().state().value 应该变成 2 但它却是 1。

你能帮我看看我哪里做错了吗？

【参考方案1】：

您应该将 Mock 函数 getTemplate 传递给您的组件，否则 jest 将无法检查它是否被调用。

你可以这样做：（通知jest.fn()）

 const props = 
        actions: 
            getTemplates: jest.fn(() => Promise.resolve())
        
    

【讨论】：

感谢您的快速回复。我仍然会收到您建议的更改的错误。错误 --- TypeError: received.getMockName is not a function at Object. (src/containers/Container.spec.js:183:169) at new Promise () at at process._tickCallback (内部/进程/next_tick.js:188:7)

你的测试中getTemplateContent 是什么？