Set up with TDD

Tram Ho

Install vue-cli

vue-test-utils is the official testing library for Vue and will be used throughout our guide. It runs in both Node.js browser environment and works with any runner test. We will run the tests in the Node.js environment on all content of this series.

With the vue-cli library is the easiest way to create our project. It will set up, as well as configure Jest, a framework that performs common tests on Javascript. We will install it by running the terminal:

or with npm:

Create a new project by running vue create [project-name] . Select “Manually select features” and “Unit Testing”, and “Jest” for testing.

After installation has finished, cd into the project and run yarn test:unit . If everything is fine, you will see:

Congratulations on your first successful run of the tests. ?

Write the first tests

We run the existing tests that come with the project. Traditionally when doing TDD, you write the test code first, then deploy the code so that the test passes the test code. Now, we will write the first component.

We don’t cần src/components/HelloWorld.vue or tests/unit/HelloWorld.spec.js anymore, so you can delete them if possible.

Create Greeting components

Create a Greeting.vue file in src/components . Inside Greeting.vue , add the following:

Write a test

Greeting has only one responsibility to render the value of greeting . The strategy here is:

  1. Render component with mount
  2. Assert the text inside components contains the keyword “Vue and TDD”

Create a Greeting.spec.js inside tests/unit . Inside, import Greeting.vue , as well as mount , and add some outlines to your test case:

There are various syntaxes used for TDD, we will use the common syntax of describe and it comes with Jest. describe what the test wants, here is Greeting.vue . it represents the part of the test the object of the test must be completed. As we have many features in components, we have many blocks it .

Now we render the component with mount and assign the component to a variable called wrapper and will also print the console, to make sure everything runs correctly:

Run the test

Run the test by typing yarn test:unit in your terminal. Any tests file ending in .spec.js be executed automatically. You will see:

We can see that the markup is correct, and the test runs successfully. The test case will pass because there are no errors, but there is a problem when we change Greeting.vue and delete greeting from the template, our test still passes, below will explain it.

Create Assert

We need to make an assertion to make sure the component works correctly. By using Jest’s expect API, it will look like this: expect(result).to [matcher] (actual) .

expect is a method to compare values ​​and objects. For example:

A complete list of matchers is available in the Jest Jest documentation . vue-test-utils does not include any comparison tools because what Jest brings is more than enough to use. We want to compare the text from Greeting so we can write the following:

but vue-test-utils has a better way to mark – wrapper.text :

We don’t need console.log , so you can delete them. Run the test with yarn unit:test , you will get:

In traditional TDD, you would write the tests before doing them in real life, see it run fail, then use the unsuccessful errors to further fix our code. Make sure that the test we tested works properly in TDD style. Here is the updated Greeting.vue :

And now run the test with yarn test:unit :

Jest gives us results and can see expected and realistic results, as well as failures. Revise Greeting.vue and make sure the test is passed again.


Next we’ll review the two vue-test-utils methods provided to render components: mount and shallowMount .


Translated from:

Share the news now

Source : Viblo