Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[testing-library] TimePicker onChange never trigger #5655

Closed
2 tasks done
JuanSeBestia opened this issue Jul 29, 2022 · 2 comments · Fixed by #5684
Closed
2 tasks done

[testing-library] TimePicker onChange never trigger #5655

JuanSeBestia opened this issue Jul 29, 2022 · 2 comments · Fixed by #5684
Assignees
Labels
component: pickers This is the name of the generic UI component, not the React module!

Comments

@JuanSeBestia
Copy link

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

I'm trying to test this component with testing-library, but I can't trigger onChange event

This issue is related #4985

Expected behavior 🤔

the components has an example to use with some framework to do atomatizated tests

Steps to reproduce 🕹

Link to live example:

https://codesandbox.io/s/react-testing-library-timepickerexample-f1wly6?file=/src/__tests__/TimePickerExample.test.js

See the tab tests

Context 🔦

Integration tests

Your environment 🌎

All the env information are available in live example

Order ID 💳 (optional)

No response

@JuanSeBestia JuanSeBestia added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jul 29, 2022
@LukasTy LukasTy added component: pickers This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Aug 1, 2022
@LukasTy
Copy link
Member

LukasTy commented Aug 1, 2022

Hello @JuanSeBestia
Thank you for creating a detailed issue.
Could you confirm your expected test flow in detail?
I've played with codesandbox and narrowed down the issue towards the fact that useMediaQuery hook returns false in jsdom environment, hence the MobileTimePicker is actually rendered instead of DesktopTimePIcker.

Could you confirm whether you were expecting to test a desktop picker flow?

I was unable to mock useMediaQuery in codesandbox due to it not supporting jest globals.
I've successfully resolved an error in a simple controlled TimePicker test case by mocking @mui/material/useMediaQuery response as true:

import useMediaQuery from '@mui/material/useMediaQuery';
...
sinon.stub(useMediaQuery).returns(true)

If this is actually your root cause, please use the mock as a temporary workaround and we'll look into whether we can do anything about it on our side.

@JuanSeBestia
Copy link
Author

I believe that I write something before but I write it again

Thanks very much to clarify that another component is rendered that I don't expect. Really I just want a way to test my flow using your components, So knowing that is rendered mobile version, I used the input in edit view with the input, I'm implement in the same live demo with the name TimePickerExample test with input mobile, So you can close this issue or wait until your MR are ready to re implement my tests

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: pickers This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants