-
-
Notifications
You must be signed in to change notification settings - Fork 49k
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
test: refactor button component test with user event and screen #36926
test: refactor button component test with user event and screen #36926
Conversation
…remove unnecessary snapshot
…th screen and jest timer
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #36926 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 437 437
Lines 8035 8035
Branches 2420 2420
=========================================
Hits 8035 8035 ☔ View full report in Codecov by Sentry. |
@clean99 ,最近社区同学在迁移 testing lib 容易其冲突,加一下钉钉群一起共建不~~ |
好的👌,我加一下~ |
冲突了 |
1 similar comment
冲突了 |
Hi @clean99 Thank you for your contribution! We noticed that this PR hasn't been updated in a while. To keep the project active and maintainable, we'll be closing this PR for now. If you'd like to proceed with these changes, please feel free to open a new PR. Thanks again for your contribution! |
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
💡 Background and solution
Problems:
snapshot tests
: There are thousands ofsnapshot tests
everywhere, the disadvantages are:snapshot tests
fordom
is a kind oftesting implementation
, because it will rule that those class, dom structure need to be exactly the same. But the user don't care about what class is been add in the element. So some refactor of style or replace adiv
element usesection
will make the tests fail while the result is correct.expect(a).toBeIndocument()
, we are telling the reader that the document havea
element, butexpect(doc).toMatchSnapshot()
really just unclearly and reader likely can't get the point(about what is important and what is not) of the test.querySelector
really can't give you the confidence as much asscreen.getBy...
. Because if you have to usequerySelector
to get an element, that usually means that it is unaccessible for user. What we need to do is to write test that simulate user as far as possible.userEvent
instead of usingfireEvent
since theuserEvent
simulate user more than fireEvent. Like thefireEvent.change
event, it only target change event while theuserEvent.type
will target focus, change, keyboard down and so on.should change loading state instantly by default
case, it create a component that wrap the button and then usestate
andsetState
to change the button loading status. Now we are testing not only the button, but also a test component and react's api, so if one of them failed, the test will failed for sure. Test should be isolated. I think we should always test theinterface
, instead of a testing component.Solution
I change most of the snapshot tests using the screen query way, and replace querySelector too. Also switch
fireEvent
touserEvent
. And refactor theshould change loading state instantly by default
test to only test it change loading status when the props change.📝 Changelog
☑️ Self-Check before Merge