React测试库找不到可点击元素（通过点击对表进行排序）
mee*_*kat 5 unit-testing reactjs react-testing-library
我想要做的是测试单击表标题列是否使用React 测试库first对表的行进行排序。我模拟了一些似乎渲染得很好的数据。
注意：我很确定这与所使用的组件无关，所以我没有费心将其放在这里。
问题
但是，当我使用 React 测试库（应该对行进行排序）触发单击事件时，行不会排序。
似乎没有找到正确的元素。
这是浏览器中的组件树：
代码
describe("Testing fullscring timp table", () => {
let mockData = [];
let columns = [];
let store;
let history;
let mockStore;
let global;
beforeAll(() => {
// column definitions for the Table component
columns = [
{ dataKey: "1", title: "first", dataIndex: 1 },
{ dataKey: "2", title: "second", dataIndex: 2 },
{ dataKey: "3", title: "third", dataIndex: 3 },
{ dataKey: "4", title: "fourth", dataIndex: 4 },
{ dataKey: "5", title: "fifth", dataIndex: 5 },
{ dataKey: "6", title: "sixth", dataIndex: 6 }
];
mockData = [
{
id: "data1",
"1": "row1_col1",
"2": "row1_col2",
"3": "row1_col3",
"4": "row1_col4",
"5": "row1_col5",
"6": "row1_col6"
},
{
id: "data2",
"1": "row3_col1",
"2": "row3_col2",
"3": "row3_col3",
"4": "row3_col4",
"5": "row3_col5",
"6": "row3_col6"
},
{
id: "data3",
"1": "row2_col1",
"2": "row2_col2",
"3": "row2_col3",
"4": "row2_col4",
"5": "row2_col5",
"6": "row2_col6"
}
];
});
history = createMemoryHistory();
// Mocking redux state
mockStore = configureMockStore();
// Setting language to be english
global = { language: "en" };
store = mockStore({ global });
test("rendering all rows", async () => {
let global = { language: "en" };
let language = global.language;
const { debug, getAllByText, getByText } = render(
<Provider store={store}>
<Router history={history}>
<Table
data={mockData}
columns={columns}
fullscreenContent={
mockData.length > 0 && (
<Modal
visible={true}
collapseIcon={<CollapseButton role="button" />}
expandIcon={<FullscreenButton />}
>
<FullscreenTimpTable
data={mockData}
columns={columns}
language={language}
/>
</Modal>
)
}
/>
</Router>
</Provider>
);
debug();
expect(getByText("row2_col3")).toBeInTheDocument(); // THIS PASSES
await waitFor(() => getByText("first"));
const columnOneNode = getByText("first");
console.log(columnOneNode);
fireEvent.click(columnOneNode);
debug(); // SEE PRINT BEWOW
最后一次 debug() 后的 console.log：
console.log
<body>
<div>
<div
class="sc-dGHRBR kaxIcm "
>
<div
class="sc-cTwCau byurQa"
>
<div
class="sc-guxjaN gGrZid"
>
<button
class="sc-jifIRw erwlEw sc-hWvDPW cLPWjv"
color="primary"
>
<span
class="sc-gHftXq XnfsF"
color="inherit"
height="24"
width="24"
>
<svg
border="currentcolor"
fill="currentcolor"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M7 10H5V5h5v2H7v3zm-2 4h2v3h3v2H5v-5zm12 3h-3v2h5v-5h-2v3zM14 7V5h5v5h-2V7h-3z"
fill-rule="evenodd"
/>
</svg>
</span>
<span
class="sc-JAcuL hUrElW"
color="#000"
/>
</button>
</div>
</div>
<div
class="sc-jEnjew hvDKdx"
>
<div
class="sc-fKuJET kPkHKR"
>
<div
class="sc-fHCNCx btXYRM"
>
<div
class="sc-Eryum cfbqUS"
>
<div
class="sc-ecVWCn cWCaBT"
scope="col"
>
<div
class="sc-lmyTMs hhYbMe"
>
first
</div>
</div>
<div
class="sc-ecVWCn cWCaBT"
scope="col"
>
<div
class="sc-lmyTMs hhYbMe"
>
second
</div>
</div>
<div
class="sc-ecVWCn cWCaBT"
scope="col"
>
<div
class="sc-lmyTMs hhYbMe"
>
third
</div>
</div>
<div
class="sc-ecVWCn cWCaBT"
scope="col"
>
<div
class="sc-lmyTMs hhYbMe"
>
fourth
</div>
</div>
<div
class="sc-ecVWCn cWCaBT"
scope="col"
>
<div
class="sc-lmyTMs hhYbMe"
>
fifth
</div>
</div>
<div
class="sc-ecVWCn cWCaBT"
scope="col"
>
<div
class="sc-lmyTMs hhYbMe"
>
sixth
</div>
</div>
</div>
</div>
<div
class="sc-cQEFXY lmcHyl"
>
<div
class="sc-hWgnmY sc-fIUAZz jwDMjI bwTNEX
"
>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row1_col1
</span>
</div>
</div>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row1_col2
</span>
</div>
</div>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row1_col3
</span>
</div>
</div>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row1_col4
</span>
</div>
</div>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row1_col5
</span>
</div>
</div>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row1_col6
</span>
</div>
</div>
</div>
<div
class="sc-hWgnmY sc-fIUAZz jwDMjI bwTNEX
"
>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row3_col1
</span>
</div>
</div>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row3_col2
</span>
</div>
</div>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row3_col3
</span>
</div>
</div>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row3_col4
</span>
</div>
</div>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row3_col5
</span>
</div>
</div>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row3_col6
</span>
</div>
</div>
</div>
<div
class="sc-hWgnmY sc-fIUAZz jwDMjI bwTNEX
"
>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row2_col1
</span>
</div>
</div>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row2_col2
</span>
</div>
</div>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row2_col3
</span>
</div>
</div>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row2_col4
</span>
</div>
</div>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row2_col5
</span>
</div>
</div>
<div
class="sc-eiBfYF lhXYii"
>
<div
class="sc-eUZScX fJNtUH"
>
<span>
row2_col6
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
控制台.log（列节点）：
HTMLDivElement {
'__reactInternalInstance$xx9v4qrl33d': FiberNode {
tag: 5,
key: null,
elementType: 'div',
type: 'div',
stateNode: [Circular],
return: FiberNode {
tag: 11,
key: null,
elementType: [Object],
type: [Object],
stateNode: null,
return: [FiberNode],
child: [Circular],
sibling: null,
index: 0,
ref: null,
pendingProps: [Object],
memoizedProps: [Object],
updateQueue: null,
memoizedState: null,
dependencies: [Object],
mode: 0,
effectTag: 1,
nextEffect: null,
firstEffect: null,
lastEffect: null,
expirationTime: 0,
childExpirationTime: 0,
alternate: null,
actualDuration: 0,
actualStartTime: -1,
selfBaseDuration: 0,
treeBaseDuration: 0,
_debugID: 100,
_debugIsCurrentlyTiming: false,
_debugSource: null,
_debugOwner: [FiberNode],
_debugNeedsRemount: false,
_debugHookTypes: [Array]
},
child: null,
sibling: null,
index: 0,
ref: null,
pendingProps: {
onClick: [Function: onClick],
children: 'first',
className: 'sc-lmyTMs hhYbMe'
},
memoizedProps: {
onClick: [Function: onClick],
children: 'first',
className: 'sc-lmyTMs hhYbMe'
},
updateQueue: null,
memoizedState: null,
dependencies: null,
mode: 0,
effectTag: 0,
nextEffect: null,
firstEffect: null,
lastEffect: null,
expirationTime: 0,
childExpirationTime: 0,
alternate: null,
actualDuration: 0,
actualStartTime: -1,
selfBaseDuration: 0,
treeBaseDuration: 0,
_debugID: 102,
_debugIsCurrentlyTiming: false,
_debugSource: null,
_debugOwner: FiberNode {
tag: 11,
key: null,
elementType: [Object],
type: [Object],
stateNode: null,
return: [FiberNode],
child: [Circular],
sibling: null,
index: 0,
ref: null,
pendingProps: [Object],
memoizedProps: [Object],
updateQueue: null,
memoizedState: null,
dependencies: [Object],
mode: 0,
effectTag: 1,
nextEffect: null,
firstEffect: null,
lastEffect: null,
expirationTime: 0,
childExpirationTime: 0,
alternate: null,
actualDuration: 0,
actualStartTime: -1,
selfBaseDuration: 0,
treeBaseDuration: 0,
_debugID: 100,
_debugIsCurrentlyTiming: false,
_debugSource: null,
_debugOwner: [FiberNode],
_debugNeedsRemount: false,
_debugHookTypes: [Array]
},
_debugNeedsRemount: false,
_debugHookTypes: null
},
'__reactEventHandlers$xx9v4qrl33d': {
onClick: [Function: onClick],
children: 'first',
className: 'sc-lmyTMs hhYbMe'
},
[Symbol(SameObject caches)]: [Object: null prototype] { childNodes: NodeList {} }
}
我尝试过的
我尝试过使用
findByRole('gridcell')getByText("first").closest('div')getByText("first").closest('Button')getByText("first").closest('button')
这些策略都不起作用。
有任何想法吗？
因此，似乎自 以来antd@5，列排序器图标（.anticon-caret-up/ant-table-column-sorter-up)本身不再可访问（它们是[aria-hidden][focusable="false]）；但列标题本身是可聚焦/可单击的。
因此，您应该定位列标题而不是上一个按钮。
| 归档时间： |
|
| 查看次数： |
1525 次 |
| 最近记录： |