Testing VueJS projects

About

In this talk we're going to learn how to setup testing tools at our projects, create tests and eventually realizing the importancy of testing our projects.

Why test?

• Quality Code

You're sure that the code does what we expect.

• Design focus on the needs

You understand the requirements, you design based on that and you build thinking on that.

• Less debugging more coding

With more test, few errors you'll have.

Tools we're going to use

• Jest
• Vue Client
• Terminal

Types of Test

• Unit

The idea of a "unit" in testing, is to break down the code into small, easily testable parts.

• E2E

Unlike a unit test, you're testing the entire application.

We're not going to talk about E2E neither Snapshot. For now let's focus on Unit testing only.

Comparison between Unit and E2E

	Pros	Cons
Unit testing	- Tests run fast - Test can be precise and allow you to identify problems	- Time-consuming to write tests for every aspect of your app
E2E testing	- Can test many things at once - Assure you that you have a working system	- Slow to run - You may took a while to find the cause of failure

Unit Testing

Quick notes on how to install the testing tool.

Installing Jest

Fastest way (With Vue CLI)

Execute the following command - Sit and wait 'till everything is done, or just go grab a coffee ☕

vue add @vue/unit-jest

It'll add some files so we'll be ready to start working with tests. 🙌

"Hey buddy, I don't think my project have Vue CLI installed. Can I add it so I won't have that much effort?"

Hum.... yes?

Execute the following command... It should work. However I think it may cause an architecture issue, just saying...

yarn add @vue/cli-service --dev

Installing manually 💪

You'll need to install the jest in your project:

yarn add jest jest-transform-stub jest-vue-preprocessor babel-jest vue-jest @vue/test-utils --dev

Are you facing Unexpected token {? If so, it means your project has a lack of some libraries

yarn add babel-core babel-preset-env --dev

After that, we need to configure some files so we'll be good to go:

• .babelrc:

{
    "presets": [
        "babel-preset-env"
    ]
}

• jest.config.js:

module.exports = {
    moduleFileExtensions: [
        'js',
        'jsx',
        'json',
        'vue'
    ],
    transform: {
        '^.+\\.vue$': 'vue-jest',
        '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
        '^.+\\.jsx?$': 'babel-jest'
    },
    transformIgnorePatterns: [
        '/node_modules/'
    ],
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/resources/js/components/$1'
    },
    testMatch: [
        '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
    ]
}

• package.json:

{
    "scripts": {
        "test:unit": "jest"
    }
}

How to test it?

The command below will call jest and test everything:

yarn test:unit

If at some point you're using TDD. Maybe you'll need to add --watch and add a new script for that. Just do it!

Brief explanation

If at this point you still don't know some keywords for Javascript testing:

• describe: Responsible for grouping every test
• it: Where test goes
  • test: is an alias. it'll do the same thing
• expect: Where comparison is made

Testing

Live:

Creating our first test in our meeting

Repository:

https://github.com/eliamartani/vuejs-test-template

Tips: Testing asynchronous functions

For asynchronous functions we can use flush-promises. It flushes all pending resolved promise handlers

Installing:

yarn add flush-promises --dev

Then adding in your test files:

import flushPromises from 'flush-promises'

...

it('async call', async () => {
    wrapper.find('button.add').trigger('click')

    await flushPromises()
    
    expect(something).toBe(true)
})

E2E Testing

🚧 Under construction

Just so you know, this is what an E2E test looks like:

Image from dev.to

Snapshot Testing

🚧 Under construction

Just so you know, this is what an Snapshot test looks like:

QA

Ask me anything, Google will answear it anyway.

Links

• @vue/test-utils
• Jest cheat sheet
• Snapshot Testing
• The What, Why and How of React testing
• Unit testing cheat sheet
• Unit vs E2E Testing for Vue.js

The end

If you're reading this, I'd like to thank you for the support.

See ya!