question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Table] Snapshot test issue with TablePagination

See original GitHub issue

Recent changes to compnent TablePagination break test.

https://github.com/mui-org/material-ui/blob/3eb02f5498857bd01bb7924eed9b946f33e39052/packages/material-ui/src/TablePagination/TablePagination.js#L114-L116

The generated id is always new and snapshot doesn’t/cann’t match.

<p 
  class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
-  id="mui-7460"
+  id="mui-62542"
>
  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Environment 🌎

@material-ui/core: 4.10.1 jest: 24.9.0

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:9
  • Comments:37 (21 by maintainers)

github_iconTop GitHub Comments

36reactions
eps1loncommented, Jun 3, 2020

Auto generated ids have no guarantee to be stable. This is another reason why we don’t recommend snapshot testing.

17reactions
eps1loncommented, Jun 4, 2020

So does it mean that we do no longer support snapshot tests?

We never did and we shouldn’t start. It restricts us for something that shouldn’t be done in the first place.

Read more comments on GitHub >

github_iconTop Results From Across the Web

how to add string text rowsPerPageOptions in mui Table ...
I wanted to add Ids on the options, for testing so I did this, ... to ForwardRef(TablePagination) , expected one of type [number,...
Read more >
Testing - Material UI - MUI
"Effective snapshot testing" by Kent C. Dodds goes into more details why snapshot testing might be misleading for React component tests. Internal.
Read more >
Snapshot Testing - Jest
Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.
Read more >
React & Material UI #20: Table Pagination - YouTube
Codesandbox: https://codesandbox.io/s/jolly-dubinsky-bhoi8In this video:- A recap of how Material UI Tables work- How Sorting with Material ...
Read more >
Building a pagination component in React with TypeScript
Table of Contents ... For testing, I'll use jest with enzyme. ... In order to solve the issue, we just need some logic...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found