This site runs best with JavaScript enabled.

Using destructuring in Cypress

Filip Hric

November 02, 2020


I often learn something new because I need to solve some kind of problem. Once that is solved, I move on to the next one. I spend a lot of time reading, thinking, trying stuff and trying to make sense of it all. One downside of my learning style is that sometimes I miss some basic stuff. This is a blog about one particular topic. Destructuring.

I have seen destructuring many times when reading someone else’s code, and I had a hard time wrapping my head around it. Mostly because I had no use for it when writing tests in Cypress, which is something I do most of the time. If you are using Cypress as well and you are still learning JavaScript, this blog may be for you.

Let’s say you have a simple object like this:

1const car = {
2 color: 'red',
3 type: 'combi',
4 autopilot: false
5}
6
7const color = car.color
8
9console.log(color) // 'red'

In your code, you may want to use properties of this object. Let’s say you are going to use the color red a lot in your code. You might want to assign it to a separate variable like you can see on line 7.

Whenever you now reference the color variable, it will return red. Notice that the name of our newly declared variable is the same as the name of the key of our object. To do the same thing, but using destructuring, you can do following:

1const car = {
2 color: 'red',
3 type: 'combi',
4 autopilot: false
5}
6
7const { color } = car
8
9console.log(color) // 'red'

Notice how the result is exactly the same. We have created a variable with a name color, that will have a value of red when we call it.

Now let’s say we want to create a function, that will take a single argument. Inside this function, we have a simple console.log, that will output color and type atrributes of a given object. The function looks like this:

1const func = (param) => {
2 console.log(param.color, param.type)
3}
4
5func(car) // red combi

We’ll pass our car object from before to this function, and you can notice the result on line 5. Notice how we create a param for our function, which is later used inside the body of the function. Now that we know how destructuing works for objects, we can use it and refactor our function like this:

1const func = ({ color, type }) => {
2 console.log(color, type)
3}
4
5func(car) // red combi

We did the exact thing as in our first example, but this time we used destructuring inside our function parameter. Go back and look at how similar these examples are. The cool thing about using destructuring like this is that we can avoid creating a generic parameter like param in our function.

The most common use for destructuring in Cypress tests is for situations where I’m passing a yielded object to a .then() command:

1it('creates a todo', () => {
2
3 cy.server().route('POST', '/todos').as('createTodo')
4 cy.visit('/')
5 cy.addTodo('buy milk') // create a todo via UI using custom command
6 cy.wait('@createTodo').then( todos => {
7 expect(todos.status).to.eq(201)
8 expect(todos.responseBody).to.deep.eq({ title: 'buy milk' })
9 })
10
11})

Notice how I create a todos parameter, similar to our params from previous example. I use that to make my assertions insde .then() command. Instead of doing this, I can refactor this code using destructuring:

1it('creates a todo', () => {
2
3 cy.server().route('POST', '/todos').as('createTodo')
4 cy.visit('/')
5 cy.addTodo('buy milk') // create a todo via UI using custom command
6 cy.wait('@createTodo').then( { status, responseBody } => {
7 expect(status).to.eq(201)
8 expect(responseBody).to.deep.eq({ title: 'buy milk' })
9 })
10
11})

I think this is pretty neat. I don’t use extra parameters in my code and I can clearly see what I am testing inside my .then() command. I bet there are tons of great use cases for destrucuting in Cypress that I’m still about to discover. If you know of any, don’t forget to let me know on Twitter, I’d love for you to share your knowledge with me.

Hope this helps. Check out my other blogs and if you like these, feel free to subscribe. You’ll get notified whenever I publish another blog.

Share article
Cypress test automation course
If you like my articles, you’re going to love my new course on Cypress.io. It’s called Cypress test automation for people in a hurry, and it is exactly what you’d expect. A compact, fast and straight-to-the-point course with lots of practical examples and challenges. Check it out!

More articles coming! Get them to your inbox ✉️



Filip Hric © 2020