From RSpec to Jest: JavaScript testing for Rails devs, by Stefanni Brasil

Abstract

Have you ever got stuck trying to write what you imagined would be a “simple” JavaScript test?

As Ruby dev, do you want to test JavaScript but feel stuck in transferring your Ruby testing skills to the JavaScript world? Do you wish that one day you could write JS tests as confidently as you write tests with RSpec? Then, this talk is for you.
Let’s face it: JavaScript isn’t going anywhere. One way to get more used to it is to be confident with our code by writing JavaScript automated tests. Let’s learn it together.

Learn how to use Jest, a popular JavaScript testing framework. This talk will go through the basics of JavaScript Unit testing with Jest, gotchas, and helpful tips to make your JS testing experience more joyful.

By the end of this talk, you’ll have added new skills to your JS testing toolbox and get an overview of the differences between RSpec and Jest. How to set up test data, mock HTTP requests, assert elements in the DOM, and more helpful bites to cover your JavaScript code confidently.

Details

Intended audience

This talk is for Ruby developers wanting to master JavaScript testing. Although the talk will focus on the most popular JavaScript library (React), Jest can be used for testing any JavaScript application. This talk is for you if you feel comfortable with testing Ruby code with RSpec or MiniTest, and want to bring that confidence to the JavaScript world by using Jest.

Outline

[1min] Why this talk
[2min] Organizing your tests with Jest Globals (describe, test, beforeEach, etc.)
[2min] The testing pyramid
Using Jest to cover your JavaScript unit tests
System tests to cover other aspects of your app
[1min] Setup realistic JavaScript Test data with Fishery
[5min] Mocking with Jest
HTTP requests without mocking fetch
Spies, function mocks
[5min] Helpful matchers
User.click instead of fireEvent.click
Using screen.debug()
container.innerHTML to inspect the DOM
[3min] Advanced testing
useEffect, onChange, etc.
[5min] Jest gotchas
queryBy vs getBy
Make sure you await for your Promises
[2min] Opportunities to improve the JS ecosystem
[Remaining time] Q&A

Outcomes

After attending this talk, learners will:

  • Become confident and productive with their JavaScript unit testing skills
  • Leave ready to write more JavaScript tests for their apps
  • Value the different perspective from the JS testing ecosystem, and find opportunities to improve the JavaScript testing ecosystem

Pitch

At my job, I usually work on large Ruby on Rails apps with React on the front-end. JavaScript is not going anywhere and by mastering how to test JavaScript in our Ruby on Rails apps, we can be confident that we are delivering a good experience for our users.

Although we are used to writing System specs to cover the front-end, there is value in Unit tests for the front end. The only blocker is that testing JavaScript can be extremely hard when you are not used to it.

Additionally, RSpec/MiniTest have different worldviews and we can easily get stuck when wanting to test a “simple” JavaScript component. It doesn’t have to be that way. My goal is to put together the talk I wish existed a few months ago when I was upgrading the Node version at a client project. I hope to make JavaScript testing more productive and even more joyful for Ruby devs.

Outside of my work as a consultant at thoughtbot, I am one of the maintainers of faker-ruby, a library with more than 3 million downloads. I am also the co-founder of hexdevs, where I help mid-career Ruby devs get to Senior level. My writing has been featured in The Ruby on Rails podcast, Remote Ruby podcast, Code with Jason podcast, and others. Some faker-ruby releases have been featured on Ruby Weekly. I also co-organized the first Rails Girls workshop in Vancouver, BC.
I have presented lightning talks at RailsConf, RubyConf Sao Paulo, and Vancouver Ruby meetup. And the talk “Perceptual Learning == More Ruby Experts?” at RubyConf 2021.

On my Investment Time at Thoughtbot, I maintain faker-ruby, write blog posts, and pair with other developers.

Bio

Stefanni Brasil is the co-founder of hexdevs, a Senior Developer at thoughtbot, and a core contributor to faker-ruby. She writes for hexdevs, thoughtbot, and has a personal blog; she hosts live Open Source Thursdays coding sessions, and co-hosts the hexdevs podcast. She has delivered Perceptual Learning == More Ruby Experts? at RubyConf 2021, led the RubyConf 2023 Hack Day as a faker-ruby expert, and has given talks at the WNB.rb community, at local Ruby meetups and RailsConf. She enjoys learning and sharing her lessons with others.

Edit proposal

Submissions

RailsConf 2024 - Accepted [Edit]

Add submission