Jestjs 如何使用jest和酶测试连接组件中的功能？

我有一个连接的组件，其中有一个方法在加载组件时被调用。我尝试了许多其他方法，例如使用dive（）.instance（）导出组件和连接的组件，这会导致错误，即

dive（）不是函数

import React, { Component } from "react";
import { connect } from "react-redux";

export class App extends Component{
    constructor(props){
        super(props);
    };

    handleClick() {
        this.props.updateDetails();
    }

    samplefunc(){ `return a list of tags such as <Link /> or <li>` };

    render(
        return { 
           <div>
             <button>{this.handleClick()}</button>
             <div>this.samplefunc()</div>
           </div>
        };
    )
   
}
const mapDispatchToProps = (dispatchEvent, ownProps) => {
    return {
        updateDetails: () => {
            dispatchEvent({
                type: "UPDATE",
                payload: {
                    id: "id"
                },
            });
        },
    };
};

export default connect(null, mapDispatchToProps)(App);

我认为对于像我这样的前端测试初学者来说，这是一个标准问题

更新
我将模拟类的实例和该实例的函数更改为spyOn，然后测试通过。但我不太明白它为什么会通过，任何解释都很感激

describe('when the message is loaded', () => {
        let spySamplefn;

        const MyApp = mountApp().find(App);
        const instance = MyApp.instance();

        beforeEach(() => {
            spySamplefn = jest.spyOn(instance, "samplefunc");
        });

        afterEach(() => {
            spySamplefn.mockClear();
        });

        it('calls the renderCategoryList method', () => {
            instance.samplefunc();
            expect(spySamplefn).toHaveBeenCalled();
        });
        
    });

我想你应该考虑一下你的组件。但在这种情况下，如果您需要使用该组件中的其他方法，您也应该模拟它们：

// mock constructor only (it's enough just to load component)
jest.mock('../App', () => {
    return jest.fn().mockImplementation(() => { // mock implementation });
});

// the same by other syntax
jest.mock('../App', () => {
    return function () { // mock implementation };
});

// mock class with other methods (it's needed if you call some methods after loading)
jest.mock('../App', () => {
    return jest.fn().mockImplementation(() => {
        return {
            samplefunc: jest.fn(() => { // mock implementation })
            render: jest.fn(() => { // mock implementation })
        };
    });
});

您的应用程序是包装应用程序组件的已连接组件，因此未定义。
尝试创建包装器并查找组件实例

const wrapper = mount(<App/>);
const MyApp = wrapper.find('APP'))
const instance = MyApp.instance();

    it("calles the sample func", () => {
        expect(instance.samplefn).toHaveBeenCalled();
    })

const wrapper=mount（）；
const MyApp=wrapper.find（'APP'））
const instance=MyApp.instance（）；
它（“调用示例函数”，（）=>{
expect（instance.samplefn）.tohavebeencall（）；
})
您可以直接使用，而不是模拟商店本身，而是模拟特定功能并监视它it@vsync您能举个例子吗？您不应该直接从组件发送事件，而是导入动作创建者并按原样使用它们，在您的
mapDispatchToProps
函数的返回对象中，通过这种方式，我得到了
Matcher错误的错误：收到的值必须是模拟或间谍函数
，我认为需要使用
spyOn
方法。在我将您的方法与
spyOn
方法组合后，我通过了测试。
// mock constructor only (it's enough just to load component)
jest.mock('../App', () => {
    return jest.fn().mockImplementation(() => { // mock implementation });
});

// the same by other syntax
jest.mock('../App', () => {
    return function () { // mock implementation };
});

// mock class with other methods (it's needed if you call some methods after loading)
jest.mock('../App', () => {
    return jest.fn().mockImplementation(() => {
        return {
            samplefunc: jest.fn(() => { // mock implementation })
            render: jest.fn(() => { // mock implementation })
        };
    });
});

const wrapper = mount(<App/>);
const MyApp = wrapper.find('APP'))
const instance = MyApp.instance();

    it("calles the sample func", () => {
        expect(instance.samplefn).toHaveBeenCalled();
    })