React is an implementation detail

October 20th, 2018 — 3 min read

by Andrea Natali
by Andrea Natali
No translations available.Add translation

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:

import '@testing-library/jest-dom/extend-expect'
import {getQueriesForElement} from '@testing-library/dom'
import userEvent from '@testing-library/user-event'
import $ from 'jquery'

$.fn.countify = function countify() {
  this.html(`
    <div>
      <button>0</button>
    </div>
  `)
  const $button = this.find('button')
  $button._count = 0
  $button.click(() => {
    $button._count++
    $button.text($button._count)
  })
}

// tests:
test('counter increments', () => {
  const div = document.createElement('div')
  $(div).countify()
  const {getByText} = getQueriesForElement(div)
  const counter = getByText('0')
  userEvent.click(counter)
  expect(counter).toHaveTextContent('1')

  userEvent.click(counter)
  expect(counter).toHaveTextContent('2')
})

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!

Epic React

Get Really Good at React

Illustration of a Rocket

Testing JavaScript

Ship Apps with Confidence

Illustration of a trophy
Kent C. Dodds
Written by Kent C. Dodds

Kent C. Dodds is a JavaScript software engineer and teacher. Kent'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.

Learn more about Kent

If you found this article helpful.

You will love these ones as well.