Question

我在React中有简单的组件。我想在用户点击按钮时测试该组件中的方法。我已经对此进行了测试，但最终没有通过。

组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import axios from 'axios';

class TestInvokingMethod extends Component {
    onClick() {
    }
    render() {
        return (
            <div>
                <input id='buttonTest' type='button' value={10} onClick={this.onClick} />
            </div>
        );
    }
}

export default TestInvokingMethod;

并测试：

import React from 'react';
import { shallow } from 'enzyme';
import TestInvokingMethod from '../../components/TestComponent/TestInvokeMethod';

const component = shallow(
    <TestInvokingMethod />
);

test('Testing invoke method', () => {

    const mockFn = jest.fn();

    component.instance().onClick = mockFn;  
    component.update();
    component.find('#buttonTest').simulate('click');

    expect(component.instance().onClick.mock.calls.length).toBe(1);
});

Answer 1

尝试使用Jest的SpyOn

const spy = expect.spyOn(wrapper.instance(), "onClick");
wrapper.update();
wrapper.find('#buttonTest').simulate('click');
expect(spy).toHaveBeenCalled();

Answer 2

除了Garry的答案。在wrapper.update()无法正常工作的情况下，请尝试使用wrapper.instance().forceUpdate()强制更新其实例。

反应组件的测试方法不起作用

2 个答案: