Testing? We talkin' 'bout testing?

Last week we announced we were giving away some AirPods Pro if you tweeted your thoughts about Bytes and oh boy are you all very nice people. In fact, too nice. Our copywriters are now unionizing and demanding higher wages. Regardless, the winner is Grayson.

We’ll be back next week with another giveaway.

---

Cypress releases v5 to make testing a little less painful

Hey Kobe, what version of Cypress are we on now?

Remember that cool high school teacher you had… the one who would let you retake a test if you failed? Cypress wants to be like that cool teacher for your JavaScript code, and it will even redo tests for you without making you rewrite any of the test code.

Test retries is the hot new feature to come out of Cypress v5. With this update, Cypress will automatically retry failed tests as many times as you’d like prior to marking them as failed.

Why is that helpful?

Tests can fail for all types of reasons, and it doesn’t always mean that your code is buggy. Maybe you had a race condition or a random network failure, or maybe your integration dependencies temporarily went offline.

Retrying tests before marking them as failed can help make sure that the test is failing because of a persistent error in your code and not because of some random outage. This should help save time and headaches, especially when E2E testing large applications.

Most of the other new features are fairly minor, and you can check them out in the changelog.

The bottom line

Cypress has grown fast since it first launched 5 years ago, quickly becoming the most popular E2E JavaScript testing framework out there (sorry, Selenium). Adding helpful new features like test retries should help increase Cypress’ popularity and grow its paying user base of enterprise users.

Considering Cypress has raised $15m in VC, that fast growth will be important. But if they’re growth plan is to keep releasing new features that make E2E testing less terrible, we’re all for it.

---

npm v7 is now in beta and “it’s a big one”

You went and did it

The OG package manager released its v7 beta a couple weeks back and has released 4 more beta versions since then. The team (at least what’s left of it) is obviously being very intentional with rolling out this update, which makes sense since they’ve told us that it represents “a massive overhaul of most of npm’s functionality.”

That means a lot of new features and breaking changes. We’ll cover a few here, but you’ll have to check out the announcement if you really want to nerd out on how v7 of the package manager will manage your packages.

New stuff:

• Arborist – a new tree management and analysis utility
• Automatically installing peerDependencies to help you properly account for them
• Improving the performance and effectiveness of npm audit
• Updates to the package-lock.json format

The bottom line

“For the massive majority of npm users, where your experience is ‘install my stuff, do the right thing, let me get back to work’, we are confident this update will be a big improvement to your development experience.”

A big enough improvement to convert Yarn fans back to npm? I guess you’ll have to run npm i -g npm@next-7 to see for yourself.

---

This week in history

You’re muted

The first version of Zoom was released 8 years ago last week, along with this creepy landing page that demonstrates how a team of four faceless, human-ish blobs could use Zoom to host their own “Cloud HD video meeting.”

From those humble (and weird) beginnings, Zoom now has over 300 million daily active users. It’s obviously been a lifesaver during Covid and one day they’ll figure out the UX for ending a meeting without it being awkward.

---

Spot the Bug (Answer Below)

function Animal (name, energy) {
  let animal = {}
  animal.name = name
  animal.energy = energy

  return animal
}

Animal.prototype.eat = function (amount) {
  console.log(`${this.name} is eating.`)
  this.energy += amount
}

const leo = Animal('Leo', 7)
leo.eat(5)

---

Cool bits

1. Sergii from the Airbnb team wrote about how they created the ts-migrate tool to migrate thousands of Airbnb JavaScript files to TypeScript. Can’t wait for his next article on the tools he created to navigate Dante’s 7th circle of Hell.

2. Nick wrote about why he and the rest of the OKCupid team decided against using GraphQL for local state management. Or should I say local date management, eh?

3. Did you know it takes 14 hours to drive from San Francisco to the Canadian border? In the same amount of time you can watch Ben Awad’s new 14-hour fullstack React/GraphQL/TypeScript tutorial.

4. ct.js is a new, 2D desktop game engine that comes with some slick visual tools and a modular library. It’s free, open source, and ready to help you build the Duke Nukem sequel we’ve all been waiting for.

5. Dave Ceddia wrote an in-depth article about building a confirmation modal in React with state machines with lots of helpful visuals and code snippets.

6. We can all agree that we need more static site generators in our lives. Ok maybe not, but Elder.js is different because it’s an SSG for Svelte with some nifty SEO benefits. Only thing its missing is $30MM of venture capital money and a crushing dependence on artificial growth metrics.

7. Tania Rascia wants to help you understand Destructuring, Rest Parameters, and Spread Syntax, so she wrote this excellent deep dive for you.

8. Tyler wrote an article and made a video about primitive vs. reference values in JavaScript. Two for the price of one! And the price is free! Just like this newsletter. Dang, what a steal.

---

Spot the Bug - Answer

Our call to leo.eat is going to fail. The reason for this is because the object returned from Animal isn’t delegating to Animal.prototype so leo.eat will be undefined.

To fix this, we can use Object.create or a combination of the this keyword with new.

function Animal (name, energy) {
  let animal = Object.create(Animal.prototype)
  animal.name = name
  animal.energy = energy

  return animal
}

// or

function Animal (name, energy) {
  this.name = name
  this.energy = energy
}

const leo = new Animal('Leo', 7)

For more details, check out A Beginner’s Guide to JavaScript’s Prototype.

---