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?

Community · Accepted Answer · 2020-06-20 09:12:55Z

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!

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 25, 2017 at 9:24

JP. Aulet

4,4164 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

KevinHu Over a year ago

If we have test our function, I think the form validation and result should be e2e test. Is that correct?

JP. Aulet Over a year ago

It's little vague, but usually the answer is 'Yes, you are correct'. "Unit test should not really test the form. To test the form and other not controller related things use e2e testing." < extracted from here: stackoverflow.com/questions/36928333/…

KevinHu Over a year ago

Thanks, and the other question about HTML tags will affect the text of the element. I don't really get what that person mean. Do you have any idea?

JP. Aulet Over a year ago

Sorry but I don't understand you, you mean "How I can test the <htmlTag> with a dynamic user.name?" You should use a predefined user object I guess...

Collectives™ on Stack Overflow

vue about unit test - javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related