Home/

...

/

Testing a Component

Testing a Component

In this lesson, we will learn about component testing and the most common issues related to nested component testing.

Jest Configuration

Let’s add the following Jest configuration in the package.json:

{
  "jest": {
    "moduleNameMapper": {
      "@/([^\\.]*).vue$": "<rootDir>/src/$1.vue",
      "@/([^\\.]*)$": "<rootDir>/src/$1.js",
      "^vue$": "vue/dist/vue.common.js"
    },
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
    }
}

moduleFileExtensions will tell Jest which extensions to look for, whereas transform will tell it which preprocessor to use for a file extension.

Lastly, let’s add a test script to the package.json:

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

Single File Component

We will start our example by using single file components.

Step 1:

Let’s first create a MessageList.vue component under src/components:

<template>
  <ul>
    <li v-for="message in messages">
      {{ message }}
    </li>
  </ul>
</template>
<script>
  export default {
    name: "list",
    props: ["messages"]
  };
</script>

Step 2:

Now ...

Access this course and 1400+ top-rated courses and projects.