vue about unit test - javascript

Question

I saw many unit test examples testing real DOM elements.

ex:

expect(vm.$el.querySelector('div').textContent).toBe('xxx')

What's the purpose of checking the text of DOM elements?

Someone says that you can test computed values, but aren't computed values tested by using nextTick ?

Also, people say that HTML tags will affect the text of the element:

<htmlTag><a><p>{{user.name}}</p></a></htmlTag>

And what if the product is in multiple languages?

I believe that we should test data, state, functions, and elements which should display correctly in the HTML template.

What are all you guys doing with Vue's unit test?

Answer 1

You make different questions, but I will try to answer the 'general' question about Unit Testing in the DOM.

Unit Testing in DOM elements can be useful for differents reasons, but the most importants usually are these:

• Test simple user actions

  Example of simple user actions:

  Clicking on a link that toggles the visibility of a DOM element Submitting a form that triggers the form validation (...) These actions can be easily tested by simulating DOM events

• Analyzing Network Characteristics

  Manipulating JavaScript to determine various network characteristics from within the browser. An example here

• Test DOM mutations & Manipulation

  A good example explained here

As you said, it's better to test directly the state / vars / methods, but sometimes the only way it's with the real or the virtual DOM.

To learn more you can take a look at this (fantastic) guide on GitHub for Unit Testing in JavaScript here

Hope it clarify and helps you!