Terra-core: [Radio, Checkbox, Time Input]: Document the need to mock window.matchMedia for jest tests

Created on 13 Feb 2018  路  8Comments  路  Source: cerner/terra-core

Issue Description


After consuming terra-form-radio and terra-form-checkbox, our jest tests started to fail with this error:

TypeError: window.matchMedia is not a function
      at Object.isConsideredMobileDevice (node_modules/terra-form-radio/lib/_RadioUtil.js:8:17)
      at Radio (node_modules/terra-form-radio/lib/Radio.js:140:131)

The file is here: _RadioUtil.js.

The same issue exists with CheckboxUtil as well.

Issue Type

  • [ ] New Feature
  • [ ] Enhancement
  • [X] Bug
  • [X] Other

Expected Behavior


Our jest tests should not fail when consuming terra-form-radio/terra-form-checkbox

Steps to Reproduce


  1. Consume radio/checkbox
  2. Run jest test on a component that uses radio/checkbox

Environment

  • Component Version: terra-form-radio (2.0.0), terra-form-checkbox (2.0.0)
  • Browser Name and Version: All
  • Operating System and version (desktop or mobile): All
terra-form-checkbox terra-form-radio help wanted

All 8 comments

After a slight bit of investigation and discussion with @yuderekyu, we have found that there is a way to get around the issue by mocking out window.matchMedia like so:

window.matchMedia = () => ({ matches: true });

like you have in your jestsetup.js file.

Is this something that we, as a consumer, should be doing on our end?

Yes, we'd recommend updating your jestsetup.js file to mock window.matchMedia with the code @yuderekyu provided.

Is it possible to add that recommendation to the documentation of those components? It would surely be helpful for other consumers to know that you _must_ mock window.matchMedia for jest tests not to fail.

@PseudoFaux Would you be up for sending a PR to update the doc?

@PseudoFaux / @bjankord, checking to see if a PR has already been made to update the doc. If not, I would be happy to make one. Thanks!

@prachigotkhindikar1 Feel free to send over a PR!

Looks good, just need to update the changelog files.

Was this page helpful?
0 / 5 - 0 ratings