• The Power of Snapshot Testing

  • Alex Jover

  • Translator: Uncle Ho, the programmer

Special disclaimer: This article is a series posted by author Alex Jover on VueDose.

Copyright belongs to the author.

The translator had already communicated with the author before the translation to get permission to translate the whole series.

In order not to disturb your reading, the authorization record is placed at the end of this article.

The body of the

If you’re in the beta phase, you’ve probably started with Jest: The all-in-one testing framework created by Facebook. It’s now one of the most popular testing frameworks, and I’ve been using it since the beginning.

You may also be using Vue-test-Utils, developed by Edd Yerburg, which is the official library of unit testing utilities that make our testing work a lot easier.

Here is a test case that uses both Jest and vue-test-utils:

it('has a message list of 3 elements', () = > {const cmp = createCmp({ messages: ['msg-1'.'msg-2'.'msg-3'] })
  expect(cmp.is('ul')).toBe(true)
  expect(cmp.find('.message-list').isEmpty()).toBe(false)
  expect(cmp.find('.message-list').length).toBe(3)
})

it('has a message prop rendered as a data-message attribute', () = > {const cmp = createCmp({ message: 'Cat' })
  expect(cmp.contains('.message')).toBe(true)
  expect(cmp.find('.message').props('message').toBe('Cat')
  expect(cmp.find('.message').attributes('data-message').toBe('Cat')

  // Change the prop message
  cmp.setProps({ message: 'Dog' })
  expect(cmp.find('.message').props('message').toBe('Dog')
  expect(cmp.find('.message').attributes('data-message').toBe('Dog')})Copy the code

As shown above, vue-test-utils gives us a number of methods to check props, classes, Content, search, and so on. In addition, it gives us methods to change properties, like setProps, which is cool.

The test case has a very explicit assertion: “Find the element with a ‘message’ style name and check if it has a ‘data-message’ attribute set to ‘cat'”.

But what if I told you that with snapshot testing, you don’t need to do that anymore.

You can call it snapshots and rewrite old test cases like this:

it("has a message list of 4 elements", () = > {const cmp = createCmp({ messages: ["msg-1"."msg-2"."msg-3"]}); expect(cmp.element).toMatchSnapshot(); }); it("has a message prop rendered as a data-message attribute", () = > {const cmp = createCmp({ message: "Cat" });
  expect(cmp.element).toMatchSnapshot();

  cmp.setProps({ message: "Dog" });
  expect(cmp.element).toMatchSnapshot();
});
Copy the code

The test results are the same, and sometimes you can find more in the snapshot.

Notice that in this test case, I just used the toMatchSnapshot method in the assertion expression and nothing else. This makes unit testing easier and faster because we no longer need to check specific properties individually.

As a result, the dynamics of unit testing have changed. Instead of writing specific assertion expressions, you can set the component to whatever state you want and then take a snapshot of it.

Snapshots imply assertions of render state: they describe how components are rendered when given a state, then snapshots are taken and validated in comparison.

Remember not to “take snapshots” of unit tests to determine what you want, but what you want to test to avoid putting the cart before the horse.

I’ve learned a lot from having this approach to unit testing. But if you need to read, learn, and learn more, you can buy my book Testing Vue.js Components with Jest. Last week I added a whole new chapter devoted to snapshot testing, including the following:

  • Rethinking snapshots
  • Why, how, and when to use snapshots
  • When not to use it
  • The sample code

Please share your thoughts with me, you can find me on Twitter.

You can read the article online and copy and paste the source code. If you like this series, please share it with your colleagues!

conclusion

Other articles in this series will be translated and posted to nuggets as they are published on the series website. Please keep an eye on uncle He, I believe I will bring you more quality content, don’t forget to like ~

If you want to know more about the translator, please check out the following:

  • Personal blog: blog.hadesz.com
  • Personal Github repository: github.com/hadeshe93
  • Personal wechat official account: Search “Uncle He”

Request translation of authorization records



If you think this article is good, share it with your friends