Libraries, utilities, and tools to enable you to write tests that resemble the way your software is used. @ReactJS, @VueJS, @Cypress_IO, @angular, @fbjest, more
your tests
- Tweets 391
- Following 10
- Followers 10,933
- Likes 489
react-testing-library is growing rapidly. Just hit 1 million downloads per month. 🎉
Raise your hand if you're using one of the Testing Library family of tools: github.com/testing-library
✋
ALT npm trends page for react-testing-library
5
15
96
React Testing Library v11 was just published: github.com/testing-library/r…
It should not require any changes for 99% of people and will hopefully make things more stable for everyone :) Enjoy!
1
22
88
Rahim Alwer (no twitter github.com/mihar-22) has been working wonders on cleaning up, upgrading, and improving docs for @TestingLib integrations for @preactjs (testing-library.com/preact 🐩) AND @sveltejs (testing-library.com/svelte🐿)!
Amazing work 👏👏👏
12
68
Hey there 👋
@kentcdodds just published: "Testing Library Updates: new release, github org, open collective, and twitter account"
testing-library.com/blog/201…
Woo! 🏆🐙🐐🐅🐳🐕🦉🦅
1
20
57
MaterialUI now uses React Testing Library!!!! 🎆🎇🎉🥳🎊
even @codecov bot got so excited about introducing @TestingLib into @MaterialUI that they just had to comment on the PR even if we explicitly disabled comments 😂
8
49
Cypress Testing Library v7.0.0-beta.2 was just published and we'd like your help testing it (especially if you use TypeScript): github.com/testing-library/c…
We moved types from DefinitelyTyped to the repo and removed deprecated queries (only find* queries is supported). Try it!
1
9
44
If you're at #ReactRally, keep an eye out for these awesome @TestingLib stickers 👀
🐙 DOM Testing Library
🐐 React Testing Library
🐅 Cypress Testing Library
🐳 React Native Testing Library
🦉 jest-dom
🏆 TestingJavaScript.com
ALT A bunch of stickers
3
3
41
More important than it sounds!
If your test can't help you feel confident your refactor didn't break anything, then what is its purpose?
I just refactored the way I fetch data and not one test failed. This shows the power of @TestingLib where you focus on testing the way your software is used rather than implementation details. #reacttestinglibrary #reactjs #testing #webdev
1
9
37
3 facts:
1. I was created so Kent could have something he liked to teach about in a testing workshop. (Just over 1 year ago).
2. There have literally been hundreds of contributors to my codebases.
3. The 🐐 emoji for React Testing Library was chosen completely at random.
3 facts:
1. I'm the 11th of 12 children in my family. (All same parents, no twins. Yes, my mother is a hero).
2. I can't bend my pinkie without bending my ring finger (both hands).
3. I'm working on a fantasy novel and I tweet about it at @kent_writes
7
29
We're really happy to officially have the Solid Testing Library as part of our ecosystem now. Many thanks to @danieljcafonso for pushing it!
A long time coming. Solid Testing Library docs are now up on the official site thanks to @danieljcafonso.
testing-library.com/docs/sol…
5
34
9,983
Saving the best for last I see... 🐙
This is a great post!
The last part of my @reactjs testing trilogy is out! The one about @fbjest and @TestingLib.
blog.sapegin.me/all/react-te…
5
29
So close to my former glory! 🏆
If you haven't updated from react-testing-library to @testing-library/react, get that done! The latest version is definitely cooler 😎 🐐
npmtrends.com/@testing-libra…
ALT npmtrends chart showing @testing-library/react has almost more downloads than react-testing-library
1
7
24
Exciting things are happening. Perfect time to get involved!
Opportunities to help merge @testing-library/user-event into @testing-library/dom
github.com/testing-library/d…
We need your help if you have typescript experience and if you can help produce documentation examples of the new and updated features.
3
19
Are you using @sveltejs and want to test your components? There's a @TestingLib for that!
Not sure about coverage, but to test components I had success with @TestingLib , I jotted my experience with it down timdeschryver.dev/blog/how-t…
There's also dainte, but I haven't used it before.
And lastly, you can always use cypress, as others have already mentioned.
1
19
Featuring your favorite testing library! 👋
🏆 TestingJavaScript.com is a self-paced workshop that will level-up your testing game and teach you how to configure and use testing tools to get the deploy-confidence you need.
It's 5 hours of high value-to-minute content. Grab your license and supercharge your testing! ⚡
ALT Screenshot of all course modules
ALT Interviews with experts section showing who the interviews are with and the title of the interview
ALT Screenshot of some of the testimonials
7
17
This is a fantastic way to learn how to use @TestingLib and the surrounding tools to increase your confidence! Give it a look.
Are you ready to level-up your testing skills?
TestingJavaScript.com is 40% off right now! One week only.
Grab it while it's hot 🔥🔥🔥
Then join us in discord and let's learn together! 🎉
5
16
Hey @FrontendMasters 👋 Thank you for your $500 donation to opencollective.com/testing-l… 🙏
Your contributions make a difference! 🐙
opencollective.com/testing-l…
15
Technically not needed for @TestingLib as Testing Library works in a real browser where this wouldn't be needed.
But if you're like most and running your tests with JSDOM (via @fbjest or otherwise), this could be really useful!!
you can use `mockOffsetSize` in your @TestingLib tests to test react-virtualized AutoResizer and other components that try to dynamic calculate the size
basead on github.com/bvaughn/react-vir…
gist.github.com/sibelius/10f…
1
2
13
Hey @kentcdodds 👋 Thank you for your $100 donation to opencollective.com/testing-l… 🙏
Your contributions make a difference! 🐙
16
Definitely normal
Ready to start the migration from Enzyme to @TestingLib and super excited about it. Is that even normal? Tests… excited…? 🤔
1
1
14
This is in response to the question: "Where did you learn accessibility?"
We LOVE this side-effect of people using @TestingLib <3 #a11y
1
1
14
👋
The copilot.github.com/ AI knows how to write React @TestingLib tests! 🐐 (though it really should be using screen and userEvent...) 😂
ALT Left text that says "Tests without the toil. Tests are the backbone of any robust software engineering project. Import a unit test package, and let GitHub Copilot suggest tests that match your implementation code." Followed by a code example that shows a test written with React Testing Library.
1
13
Welcome to the family 💜 @preactjs 🎣
Interested in testing your #preact hooks in isolation? Don't want to write your own wrappers?
Look no further!
We just released @testing-library/preact-hooks to npm!
@preactjs @TestingLib @trivago_tech
bit.ly/3cJvxQc
12
People using React Testing Library, how do you use cleanup? testing-library.com/docs/rea…
1. via setupFilesAfterEnv (or in src/setupTests.js for CRA)
2. import '@testing-library/react/cleanup-after-each' in each test
3. afterEach(cleanup)
4. afterEach(() => {
// stuff
cleanup()
})
49%
setupFilesAfterEnv
10%
import in each test
23%
Pass cleanup to afterEach
17%
call cleanup in afterEach
248 votes • Final results
3
3
11
Hey @tamouse 👋 Thank you for your $10 donation to opencollective.com/testing-l… 🙏
Your contributions make a difference! 🐙
opencollective.com/testing-l…
1
10
New alpha version of @testing-library/cypress published: github.com/testing-library/c…
Please give it a test drive!
1. npm install @testing-library/cypress@alpha
2. find/replace `.get` with `.find` in your `cypress/` directory
Everything should still work. Let us know if it doesn't!
1
1
10
This is one of the best parts of @TestingLib! You learn it with React (or any other framework), then you can use it with Vue (or any other framework). BYOF (bring your own framework). It's fabulous.
1
7
Really great OSS opportunity here: github.com/testing-library/t…
Docs need to update:
`dom-testing-library` to `@testing-library/dom` etc.
1
3
8
Awesome! Even better than the mutation observer shim is to use the latest version of jsdom with either the latest version of jest or jest-environment-jsdom-sixteen.
2
7
Download numbers show me a bit behind enzyme but catching up fast.
Enzyme's download numbers are still growing, but the growth is slowing and my growth is accelerating.
2
6
PSA
If you're still using #enzyme over @TestingLib for your @reactjs codebase then you're going to have a massive headache migrating to functional components.
1/n
1
5
Can definitely use @TestingLib with mocha/chai too :) (but most people use @fbjest npmtrends.com/jest-vs-mocha).
1
4
👋 Kent here,
I recommend folks give a serious look at @Applitools. It's incredible. Otherwise, try percy.io.
1
3
This is one reason that use-event is recommended github.com/testing-library/u…
1
1
3
1
3
This is what I recommend until react 16.9.0 is officially released: github.com/kentcdodds/learn-…
3
You're making me blush 🥰
"There hasn't been a library more intuitive, easy to set up and more beginner friendly. In some occasions, it has been even a great way to break in a developer into a new project." @aromanarguello on @TestingLib medium.com/@aromanarguello/g…
ALT “There hasn’t been a library more intuitive, easy to set up and more beginner friendly. In some occasions, it has been even a great way to break in a developer into a new project.…” from “Getting started with Jest + react-testing-library” by Alejandro Roman.
2
🌟
react-hooks-testing-library has just hit 1000 stars on github! @TestingLib
github.com/testing-library/r…
2
This is great!
One thing that I'd recommend is to make sure that your tests are isolated (related: kentcdodds.com/blog/test-iso…). I would have written all of that as a single test (kcd.im/trophy). Just some thoughts :) Thanks for sharing your knowledge! - @kentcdodds
1
You might run the article by folks in testing-library.com/discord
1
2
That's probably a bug and we should simulate submitting the form on enter (if the element being typed into is an input within a form). PRs welcome :)
1
2
Actually, this is what we do for the async queries: github.com/testing-library/d…
1
2
Also, whatwg-fetch is not intended to actually support Node. It only really works because of jsdom.
2
Hey @_konsch 👋 Thank you for your $10 donation to opencollective.com/testing-l… 🙏
Your contributions make a difference! 🐙
opencollective.com/testing-l…
2
This may help: kcd.im/what-test
Also, join our community on spectrum! spectrum.chat/testing-librar…
2
That merge didn't happen. Hit a ship stopper. For now they'll remain separate. However user event did get an update that was pretty cool.
Also, we went the opposite direction and now everything is sync (for now)
2
There are framework specific implementations for many framework and tools. Scroll down a bit on the homepage: testing-library.com
1
1
Glad you like that aspect! It's very intentional for the exact reason you describe!
Anyone know anything about enzyme? I could use a hand... github.com/kentcdodds/enzyme…
ALT Screenshot of the code in the index.js file of the linked repository
1
Shouldn't it all happen asynchronously, even when you mock the API request, it should return a promise.
1
Is there a reason no alt is on the image? You'll want an alt on the image to make it accessible to screen readers. With that you can ditch the test id and use getByAltText
1
1
Use findBy instead of getBy: testing-library.com/docs/dom…
1
I'm not sure. But I think it would be great to have it featured somewhere where people won't miss it
1
1
You'll love it Ana! And our community at spectrum.chat/testing-librar… is really friendly and helpful 💯
1
1
But snapshots aren't really all that recommended. kcd.im/snapshots
1
I'm guessing that code sample was just an example, but in case it's not, make sure you have test isolation! kentcdodds.com/blog/test-iso… (you'd need a render call in the test)
1
1
Use findByText instead. Also, join spectrum.chat/testing-librar…
1