A beginner's guide to checking the functionality of individual Vue components

Question

A beginner's guide to checking the functionality of individual Vue components

I'm looking to implement ava for conducting unit tests on my Vue components. Currently, I have a basic setup in place:

package.json

{
    "name": "vue-testing",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "babel": {
        "presets": [
            "es2015"
        ]
    },
    "ava": {
        "require": [
            "babel-register",
            "./test/helpers/setup-browser-env.js"
        ]
    },
    "devDependencies": {
        "ava": "^0.18.1",
        "babel-preset-es2015": "^6.24.1",
        "babel-register": "^6.22.0",
        "browser-env": "^2.0.21"
    },
    "dependencies": {
        "vue": "^2.1.10"
    }
}

./test/helpers/setup-browser-env.js

import browserEnv from 'browser-env';

browserEnv();

./test/Notification.js

import Vue from 'vue/dist/vue.js';
import test from 'ava';
import Notification from '../src/Notification';

let vm;

test.beforeEach(t => {
    let N = Vue.extend(Notification);

    vm = new N({ propsData: {
        message: 'Foobar'
    }}).$mount();
});


test('that it renders a notification', t => {
    t.is(vm.$el.textContent, 'FOOBAR');
});

src/Notification.js

export default {
    template: '<div><h1>{{ notification }}</h1></div>',
    props: ['message'],
    computed: {
        notification() {
            return this.message.toUpperCase();
        }
    }
};

Upon running ava, all functions smoothly with an expected output of 1 passed.

I am interested in utilizing the component syntax outlined below:

./src/Notification.vue

<template>
    <div>
        <h1>{{ notification }}</h1>
    </div>
</template>
<script>
export default {
     props: ['message'],

    computed: {
        notification() {
            return this.message.toUpperCase();
        }
    }
}
</script>

However, attempting to run ava results in the following error message:

> 1 | <template>
    | ^
  2 |     <div>
  3 |         <h1>{{ notification }}</h1>
  4 |     </div>

I haven't been able to resolve this issue yet and any guidance would be highly appreciated!

javascript testing vue.js ava

Answer 1

Answer №1

Challenge

If you want to run .vue files as JavaScript, you must first compile them.

Resolution

To achieve this, utilize vue-loader on modules by leveraging vue-node.

Start by executing npm install --save-dev vue-node, to integrate vue-node into your project

Within your /helpers directory, establish a setup.js file

Incorporate the following:

const hook = require('vue-node');
const { join } = require('path');

// Provide an absolute path to the webpack configuration for the hook function.
hook(join(__dirname, './path/to/webpack.config.js'));

Replace ./path/to/webpack.config.js with the relative path to a webpack config containing vue-loader, within your project.

Include the following in package.json

"ava": {
  "require": [
    "./test/helpers/setup.js"
  ]
},

as a property.

Take reference from this working example repository - https://github.com/eddyerburgh/avoriaz-ava-example

Other Options

This discussion presents various methods of testing with ava.

Answer 2

Challenge

If you want to run .vue files as JavaScript, you must first compile them.

Resolution

To achieve this, utilize vue-loader on modules by leveraging vue-node.

Start by executing npm install --save-dev vue-node, to integrate vue-node into your project

Within your /helpers directory, establish a setup.js file

Incorporate the following:

const hook = require('vue-node');
const { join } = require('path');

// Provide an absolute path to the webpack configuration for the hook function.
hook(join(__dirname, './path/to/webpack.config.js'));

Replace ./path/to/webpack.config.js with the relative path to a webpack config containing vue-loader, within your project.

Include the following in package.json

"ava": {
  "require": [
    "./test/helpers/setup.js"
  ]
},

as a property.

Take reference from this working example repository - https://github.com/eddyerburgh/avoriaz-ava-example

Other Options

This discussion presents various methods of testing with ava.

Answer 3

Answer №2

If you're looking to experiment with using petrol for testing, consider checking out this resource: https://github.com/MGMonge/petrol

Here's an example of how you can incorporate it into your workflow:

import Notification from "../src/Notification.vue";
import VueTestCase from "petrol/core/VueTestCase.js";

export default class NotificationTest extends VueTestCase {
    beforeEach() {
        this.SUT = this.mount(Notification, {message: 'soMe MeSSagE'});
    }

    /** @test */
    it_converts_message_to_upper_case() {
        this.assertEquals('SOME MESSAGE', this.SUT.notification);
    }
}

Answer 4

If you're looking to experiment with using petrol for testing, consider checking out this resource: https://github.com/MGMonge/petrol

Here's an example of how you can incorporate it into your workflow:

import Notification from "../src/Notification.vue";
import VueTestCase from "petrol/core/VueTestCase.js";

export default class NotificationTest extends VueTestCase {
    beforeEach() {
        this.SUT = this.mount(Notification, {message: 'soMe MeSSagE'});
    }

    /** @test */
    it_converts_message_to_upper_case() {
        this.assertEquals('SOME MESSAGE', this.SUT.notification);
    }
}

Answer 5

Answer №3

You're almost at the finish line:

<template>
    <div>
        <h1>{{ alertMessage }}</h1>
    </div>
</template>
<script>
  export default {
     props: ['message'],

    computed: {
        alertMessage() {
            return this.message.toUpperCase();
        }
    }
}
</script>

What I usually do when starting a new file is use this template:

<template>
</template>

<script>
  export default {
  }
</script>

<style>
</style>

and then I begin writing code

For more information, visit: https://v2.vuejs.org/v2/guide/single-file-components.html

Answer 6

You're almost at the finish line:

<template>
    <div>
        <h1>{{ alertMessage }}</h1>
    </div>
</template>
<script>
  export default {
     props: ['message'],

    computed: {
        alertMessage() {
            return this.message.toUpperCase();
        }
    }
}
</script>

What I usually do when starting a new file is use this template:

<template>
</template>

<script>
  export default {
  }
</script>

<style>
</style>

and then I begin writing code

For more information, visit: https://v2.vuejs.org/v2/guide/single-file-components.html

A beginner's guide to checking the functionality of individual Vue components

Answer №1

Answer №2

Answer №3

Similar questions

How to use Vuetify v-dialog to pause video playback when closed

Using Javascript to conditionally hide a Vimeo iframe with an if-else statement

Transmit a message from the background.js script to the popup window

Unexpected error encountered with node.js when attempting to run: npm run dev. A TypeError was thrown stating that require(...) is not

Classify the JavaScript objects according to the array of object lists

Utilizing arrays dynamically to generate data for a bar chart display in JavaScript

Tips for halting click propagation in VueJS

Problem when deploying my Vue.js, Node, MySQL, and NginX application on DigitalOcean

Learn how to obtain a response for a specific query using the `useQueries` function

Is it possible to use a += operator with attr() and val() functions in JavaScript?

Verify whether a div element is styled in a specific manner

"Activate the parent window by navigating using the accesskey assigned to the href

Angular 5 - Creating a dynamic function that generates a different dynamic function

Exploring AngularJS: Retrieving data based on a specific ID from a JSON document

Discovering the identification of a comment in JavaScript

What is the way to utilize a scope variable within an ng-repeat filter?

Why are the UI components (`Card Number`, `MM/YY`, `CVC`) not being displayed in the React app when using Card

Encountering difficulties in sending the data to Firebase through the contact form

Accessing JSON object with Javascript

jQuery is great at adding a class, but struggles to remove it