reactjs - React 测试库找不到可点击的元素（按点击排序表）
问题描述
我要做的是测试单击first表标题列是否使用React Testing Library对表的行进行排序。我嘲笑了一些似乎渲染得很好的数据。
注意：我很确定这与使用的组件无关，所以我没有费心把它放在这里。
问题
但是，当我使用 React 测试库（应该对行进行排序）触发 click 事件时，行没有排序。
似乎找不到正确的元素。
这是浏览器中的组件树：
编码
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>
控制台日志（列节点）：
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')
这些策略都没有奏效。
有任何想法吗？
解决方案
推荐阅读
- wxpython - 我应该如何从 wxPython 的 FormatISOCombined(self, sep='T') 函数文档中读取 sep='T'？
- three.js - 仅沿曲线/多段线垂直拉伸几何图形
- python-3.x - 我需要帮助确定我应该将 IF 条件放在代码块中的哪个位置
- android - 为什么 viewModelScope.launch 中的代码在收集后结束？
- json - 使用 Neo4j 存储 json 数据
- javascript - 带有 --prod 标志的 Ionic 5 构建失败 - 类型上不存在属性“翻译”
- c# - 搜索文件时如何从 C# 中的 UnauthorizedAccessException 错误继续
- git - 如何在 Visual Studio 2019 v.16.8.xxx 中禁用 Git 源代码管理？
- python - 从列表或切片中的多个数字解析数据 - 类型错误：列表索引必须是整数或切片，而不是 str
- amazon-web-services - AWS Lambda 函数无法访问 AppSync GraphQL API - 权限被拒绝