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.

InlineCheckbox sets indeterminate of null in snapshot testing

See original GitHub issue

What package(s) are you using?

  • carbon-components@10.9.3
  • carbon-components-react@7.9.3
  • react-test-renderer@16.13.0

Detailed description

Describe in detail the issue you’re having.

While snapshot testing DataTable with batch actions with Jest and react-test-renderer, the react-test-renderer snapshot test fails with the following error:

TypeError: Cannot set property 'indeterminate' of null
    at InlineCheckbox.componentDidMount (components/InlineCheckbox/InlineCheckbox.js:70:36)

I believe this is occurring due to the follow lifecycle method:

https://github.com/carbon-design-system/carbon-components-react/blob/master/src/components/InlineCheckbox/InlineCheckbox.js#L75-L77

In a JSDOM rendered environment, the this.inputNode ref is null, yet we are attempting to set indeterminate on it.

This issue has arisen in other UI libraries that have handled input elements in snapshot testing. Their solution was to add a check to ensure that the ref was non-null before setting indeterminate. I don’t believe there should be a situation in a live web application where the input ref is null, but specifically in react-test-renderer snapshot testing this comes up, and the error prevents generating snapshots.

Related issue: https://github.com/palantir/blueprint/issues/3408#issuecomment-471852467

Is this issue related to a specific component?

InlineCheckbox (and any component that consumes it)

What did you expect to happen? What happened instead? What would you like to see changed?

I expected to see a snapshot generated using react-test-renderer, but instead snapshot generation was prevented due to the above error.

What browser are you working in?

Node.js (JSDOM)

Steps to reproduce the issue

  1. Create a react component using DataTable with batch actions
  2. Write a snapshot test with react-test-renderer
  3. Observe the error in the test that prevents snapshot generation

Please create a reduced test case in CodeSandbox

Reproducible demo here: https://codesandbox.io/s/indeterminate-carbon-jest-failing-so4g7 (To view the failing test, select the Tests tab on the right side of the page)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
jeff-arncommented, Mar 18, 2020

@emyarod yes I can look into zipping that up

0reactions
emyarodcommented, Mar 31, 2020

any updates @repjarms ?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot set property 'indeterminate' of null in React
When a questions value is null then the checkbox should be shown as indeterminate, otherwise should be checked or not-checked.
Read more >
Cannot Set Property 'Indeterminate' Of Null In React - ADocLib
This is part of the output I get when trying to do snapshot testing to that Checkbox component. TypeError: Cannot set property 'indeterminate'...
Read more >
Indeterminate Checkboxes - CSS-Tricks
The indeterminate state is visual only. The checkbox is still either checked or unchecked as a state. That means the visual indeterminate state ......
Read more >
Learning to cook — ObjectListView 2.9.1 documentation
If you have a simple boolean field, setting TriStateCheckBoxes is pointless since your data cannot handle the Indeterminate state (null in this case)....
Read more >
androidx.compose.material - Android Developers
Indeterminate Material Design circular progress indicator. ... This function is used to set the current value of LocalTextStyle , merging the given style ......
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