What I am trying to do is test that clicking the first table header column sorts the rows of the table using React Testing Library. I have mocked some data which seems to render just fine.
Note: I am pretty sure this has nothing to do with the components used, so I did not bother putting the here.
The problem
However, when I fire the click event with React Testing Library (which should sort the rows), the rows are not sorted.
It seems like the correct element is not found.
Here is the component tree in the browser:
The code
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
The console.log after the last debug():
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>
console.log(columnNode):
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 {} }
}
What I have tried
I have tried to use
findByRole('gridcell')getByText("first").closest('div')getByText("first").closest('Button')getByText("first").closest('button')
Neither of those strategies worked.
Any ideas?