函数组件的Jest函数调用在刺激点击时出错

Question

我在另一个组件文件中导入了一个表组件，并从父组件传递道具。

TableWrapper.js

const handleRowClick = rowData => {
// function data
}
<TableRender onRowClick={handleRowClick} id={'AUDIT'} />

我正在为这种函数编写测试用例，因为我希望覆盖此函数并将数据传递给它rowData

testFile.js

import React from 'react';
import { shallow } from 'enzyme';
it('handle row click is called', () => {  
const handleRowClick = jest.fn();
const wrapper = shallow(<TableWrapper {...props} onRowClick={handleRowClick} />);
const rowClickFunction = wrapper.find('.ra--audit-table__content');
rowClickFunction.simulate('handleRowClick');
expect(handleRowClick).toBeTruthy();
})

如果我这样做，那么它通过了测试用例，但没有覆盖覆盖中的函数。

testFile.js

import React from 'react';
import { shallow } from 'enzyme';
it('handle row click is called', () => {  
const handleRowClick = jest.fn();
const wrapper = shallow(<TableWrapper {...props} onRowClick={handleRowClick} />);
const rowClickFunction = wrapper.find('.ra--audit-table__content');
rowClickFunction.simulate('handleRowClick');
expect(rowClick).toHaveBeenCalledTimes(1);
})

如果我做了这个改变，它会给我一个错误：-

expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0

我想把这个功能包括在内。有什么想法吗？

Answer 1

1. 您模拟了错误的事件。您应该模拟CCD_ 2

更改：

const rowClickFunction = wrapper.find('.ra--audit-table__content');
rowClickFunction.simulate('handleRowClick');

至：

const elem = wrapper.find('.ra--audit-table__content');
elem.simulate('click');

(还要确保可点击元素具有.ra--audit-table__content类(

2. 您正在创建错误的组件。您应该创建一个TableRender，而不是TableWrapper

更改：

const wrapper = shallow(<TableWrapper {...props} onRowClick={handleRowClick} />);

至：

const wrapper = shallow(<TableRender onRowClick={handleRowClick} />);

代码(testFile.js(:

it('handle row click is called', () => {
const handleRowClick = jest.fn((i) => {console.log(`row ${i} clicked`)});
const wrapper = shallow(<TableRender onRowClick={handleRowClick} />);
const elem = wrapper.find('.ra--audit-table__content');
elem.simulate('click');
// expect(handleRowClick).toBeTruthy();
expect(handleRowClick).toHaveBeenCalledTimes(1);
})

Ps：我测试过了，效果很好。