gregnb / gregnb/mui-datatables

Impossible to customise data-testid

Open
#1,898 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.7k
Forks
906
PR merge metrics
No merged PRs in 30d

Description

## Expected Behavior
I'd expect to be able to choose my `data-testid` labels for unit testing, instead of having MUI-datable, a 3rd party library, to define them for me.

Even if I try to define it manually using the `setRowProps()` option, it gets overwritten by the current default implementation.

A current hack would be to provide a custom row component, which clearly is overkill for a testing label.

## Current Behavior
`data-testid` is currently forced to `'MUIDataTableBodyRow-' + dataIndex` ([see current implementation](https://github.com/gregnb/mui-datatables/blob/7d3a19062b6eb441bf2a6d4a2bb2f6f6879db592/src/components/TableBody.js#L269))

Feature was added in [PR 667](https://github.com/gregnb/mui-datatables/pull/667) after being first reported in issue [#618](https://github.com/gregnb/mui-datatables/issues/618)

## Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 5.2.2 |
| MUI-datatables | 4.0 |

image

```javascript
function foo(data) {
const columns = [...];
const options = {

/**
* This is ignored and replaced by current
* default implementation
*/
setRowProps: () => ({ "data-testid": "CUSTOM-TEST-ID" }),
};

return (

);
}
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in src/components/TableBody.js around the implementation linked near line 269, and trace how setRowProps is applied to each row. Confirm the completed behavior by rendering a table with a custom data-testid and verifying that the caller-provided label is preserved instead of the default.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.