This site runs best with JavaScript enabled.

React is an implementation detail

October 20, 2018


...yep, you read that right. Most of the course actually has nothing to do with React specifically.

I'm so excited about the response to my new Testing JavaScript course! I knew the developer community needed help with testing the right way, but... wow. I'm floored. 🙏

But if you haven't signed up yet (or even if you have), let's talk about React for a minute.

If you've been following me for a while, you know I'm pretty excited about React. I'm most effective with React, and I don't use any other frameworks to get work done on the frontend.

But I'm also a big fan of avoiding testing implementation details, and React is an implementation detail!!

Guess what that means? All the stuff we talk about in TestingJavaScript.com is relatively easy to apply with other frameworks — like whichever framework you're using right now, or will use in the future.

In fact, I have an entire course showing you how to get up and running with your own testing utility and enjoy the same benefits that you'll see with react-testing-library. That's thanks to the fact that react-testing-library itself is a very small library, and the real brains behind it is dom-testing-library — which is totally framework-agnostic! Cool right!? 😎

In fact, check out this example from the course for testing a jQuery plugin with dom-testing-library:

1import 'jest-dom/extend-expect'
2import $ from 'jquery'
3import {getQueriesForElement, fireEvent} from 'dom-testing-library'
4
5$.fn.countify = function countify() {
6 this.html(`
7 <div>
8 <button>0</button>
9 </div>
10 `)
11 const $button = this.find('button')
12 $button._count = 0
13 $button.click(() => {
14 $button._count++
15 $button.text($button._count)
16 })
17}
18
19// tests:
20test('counter increments', () => {
21 const div = document.createElement('div')
22 $(div).countify()
23 const {getByText} = getQueriesForElement(div)
24 const counter = getByText('0')
25 fireEvent.click(counter)
26 expect(counter).toHaveTextContent('1')
27
28 fireEvent.click(counter)
29 expect(counter).toHaveTextContent('2')
30})

The other frameworks are even better, considering most modern frameworks are component-based. What's so cool is that 99% of the tests you write with these tools will look basically the same regardless of what framework you use! That's a huge win.

The hardest part is figuring out how to get some DOM from your component into the document. And one of the course modules shows you how to do that with 11 frameworks and libraries! I think you'll really like this part of the course!

Discuss on TwitterEdit post on GitHub

Share article

TestingJavaScript.com

Your essential guide to flawless testing.

Jump on this self-paced workshop and learn the smart, efficient way to test any JavaScript application. 🏆

Start Now
Kent C. Dodds

Kent C. Dodds is a JavaScript software engineer and teacher. He's taught hundreds of thousands of people how to make the world a better place with quality software development tools and practices. He lives with his wife and four kids in Utah.