笑话+酶.无法读取未定义的属性'_isMockFunction'.模拟箭头的keyDown

Question

我的主要组件的测试方法存在严重问题.经过多次重试后,我的实际测试仍然不起作用,看起来像这样:

describe('<App />:', () => {
    beforeEach(() => {
        wrapper = mount(<Provider store={store}><App /></Provider>);
    });
    describe('Interaction:', () => {
        it('should call ArrowDown()', () => {
            const instance = wrapper.instance();
            spy = jest.spyOn(instance, 'ArrowDown');
            instance.forceUpdate();
            wrapper.simulate('keyDown', {key: 'Arrow down'});
            expect(spy).toHaveBeenCalled();
        });
    }); 
});

我从控制台得到的是:

TypeError:无法读取未定义的属性'_isMockFunction'

其他测试,如快照或查找App内的其他组件工作正常.我正在寻找simillar问题,但我找到的解决方案无法正常工作.请帮忙.

PS:我使用原型时出现相同的错误:

describe('<App />:', () => {
    beforeEach(() => {
        wrapper = mount(<Provider store={store}><App /></Provider>);
    });
    describe('Interaction:', () => {
            it('should call ArrowDown()', () => {
            spy = jest.spyOn(App.prototype, 'ArrowDown');
            wrapper = mount(<Provider store={store}><App /></Provider>);
            wrapper.simulate('keyDown', {key: 'Arrow down'});
            expect(spy).toHaveBeenCalled();
        });
    }); 
});

Answer 1

看起来jest.SpyOn(App.prototype, 'ArrowDown')是导致您出现问题的线路。我不完全确定为什么不看你的App声明，但我想指出，这不是我进行测试的方式，而且我敢说，也许这不是 Jest/Enzyme 的预期方式用过的。

在此测试中，除了 React 已成功将按键绑定到组件函数这一事实之外，您实际上并未测试任何其他内容，这实际上并没有对您的代码或任何特定逻辑执行任何有意义的操作。我通常会编写一个测试来模拟按钮单击，然后检查新的 DOM 状态以检查按钮单击是否达到了预期的效果。

如果涉及到服务调用，我可能会监视服务层，检查它是否被正确调用并返回受控值，然后确保 DOM 处于正确状态。当您以这种方式进行操作时，实际上没有必要监视各个组件方法。