测试使用函数构建的 React 组件

Question

对使用函数构建的 React 组件进行实验测试。在此之前，我习惯于做：

const animalsTable = shallow(<Animals/*props*//>); 
animalsTable.instance().functionToTest();

ShallowWrapper.instance() returns null函数，所以现在在 Alex Answer 之后，我直接测试 DOM。 下面是我的 React 组件和一些测试的简化版本：

反应组件：

import React, {useState, useEffect} from 'react';
import ReactTable from 'react-table';
const AnimalsTable = ({animals}) => {
const [animals, setAnimals] = useState(animals);
const [messageHelper, setMessageHelper] = useState('');
//some functions
useEffect(() => {
//some functions calls
}, []);
return (
<div>
<ReactTable id="animals-table" 
//some props
getTrProps= {(state, rowInfo) => {
return {
onClick: (_event) => {
handleRowSelection(rowInfo);
}
};
}}
/>
<p id="message-helper">{messageHelper}</p>
</div>
);
};
export default AnimalsTable;

测试：

//imports
describe('AnimalsTable.computeMessageHelper', () => {
it('It should display the correct message', () => {
const expectedResult = 'Select the correct animal';
const animalsTable = mount(<AnimalsTable //props/>);
const message = animalsTable.find('#message-helper').props().children;
expect(message).to.equal(expectedResult);
});
});

这个运行良好。

我的问题是如何测试ReactTable组件上的行单击以测试handleRowSelection方法？

我目前的测试是：

describe('AnimalsTable.handleRowSelection', () => {
it('When a selection occurs should change the animal state', () => {
const animalsTable = mount(<AnimalsTable //props/>);
const getTrProps = channelsSelectionTable.find('#animals-table').props().getTrProps;
//what to do from here to trigger onClick() ?
});
});

编辑：我认为正确的方法是这样的，但没有触发句柄行选择：

const animalsTable= mount(<AnimalsTable //props />);
const rows = animalsTable.find('div.rt-tr-group');
rows.at(0).simulate('click');

我将尝试添加一个简单的代码沙盒

Answer 1

在这里，我发现了解决方案，我必须使用 Chrome 检查类名，然后使用它来模拟对表格第一行的单击：

it('When an animal selection occurs, it change the checkbox state', () => {
const animalsTable = mount(<AnimalsTable //props/>);
const rows = animalsTable.find('div.rt-tr.-odd');
rows.at(0).simulate('click');
const checkBoxResult = animalsTable.find('input[type="checkbox"]')
.at(0).props().checked;
expect(checkBoxResult).to.equal(true);
});

可能不是测试它的正确方法，但这种方法正在工作。