Kicking off from , we create our project boilerplate; assuming you have the vue-cli already installed. Right on, our A guide to better predictable code awesome-todo vue create awesome-todo We manually select our project setup. Using Vue-2, allowing the , as well as along with the defaults selected. We select when it comes to our unit testing solution as well and store the configuration in our package.json file. Are you ready? Good, let's get on to the next step. router vuex unit testing jest For purposes of this guide, we'll use bootstrap; particularly, bootstrap-vue. Let's shorten those CSS classes. npm install bootstrap-vue In your file, add the necessary configurations. main.js { BootstrapVue, BootstrapVueIcons } Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons) import from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Spot on! On the home/ landing page of our application, we want a welcome message displayed. For our case; ' ' Welcome to TheGreenCodes awesome to-do list First of all, though, we test. As I said, we think before we implement. We think of the feature we want to implement before actually implementing it. We then write tests for this feature, to avoid the addiction cheat trap where we say we'll write a test after then never actually get to it. Create a file under the directory in the folder. home.spec.js unit tests Notice how we name the file. Our test runner will look for javascript files with the keyword, through the project, under this directory. Now copy the following code snippet below. spec { shallowMount } Home describe( , () => { it( , () => { welcomeMessage = wrapper = shallowMount(Home)
    expect(wrapper.text()).toMatch(welcomeMessage)
  })
}) import from '@vue/test-utils' import from '@/views/Home.vue' // what componet are the tests referring to 'Home.vue' // what feature or spec are we targetting specifically 'Displays a welcome message' const 'Welcome to TheGreenCodes awesome to-do list' const To run this as well as consecutive tests: npm run : unit test Our test fails; rather horribly. Reading the shell, you see: expect(received).toMatch(expected)

    Expected substring: Received string: "Welcome to TheGreenCodes awesome to-do list" "" We gave it a variable with the message to expect in the component . What we know for certain, however, is that we haven't even touched that component, hence the failure. Head over to the Home component under views, remove the HelloWorld import and add an tag with our welcome message. Re-run this test and see the difference. Home h2 Before we get any further, we should explain what the elements in our Home test mean. As we have made use of comments, we shall describe target areas: wrapper = shallowMount(Home) const We create a variable , , that holds our component. How we do this you ask? We import from Vue test utils. Just like the default component life-cycle hooks, our component is initialized, only this time, since we specified we wanted a shallow mount, any child component within this parent component is not included. wrapper shallowMount We then ask the question: 'Hey! Is there any mention of our title from within this component?' To which the suite complies with a yes or no depending on what we have. We expect this component to have text, not only text but that which matches our welcome message. Behold! We have done the foundation building block of a test; tests must fail, tests must pass and the code must be refactored. We break this statement down: Tests must fail Our feature has not been implemented yet, so why on earth would we expect a test to pass? Test must pass Hey Marv, I wrote down that cool little feature. What next? Simple; the test must pass. The test whose feature we just wrote should pass. Code must be refactored When the same piece of code is edited later, does the code still pass? Can this component or code be edited and still let the test pass gracefully? Do we get the 'It broke everything else!' exclamation? Tests must fail, tests must pass and the code must be refactored. We could go further with this test and specify what element we wanted to have the title: titleFound = wrapper.find( )
    expect(titleFound.text()).toMatch(welcomeMessage) const 'h2' You get the same result. Ignore the warning for UI element registration, in case you are already using it within your code, for now, we'll fix this in a while. Let's not just make our application, but let's make a great UI. Adjust your code to look as below: Home component Welcome to TheGreenCodes awesome to-do list < > template < = > div class "home" < > h2 </ > h2 < = > div class "container" < = > b-card class "list-container" </ > b-card </ > div </ > div </ > template < > script { : , : {
  } export default name 'Home' components </ > script < > style scoped { : ;
} .list-container max-width 170% </ > style Refactor the routes: (This would mean another component under views with the name `Completed`) { : ,
    name: ,
    component: () => (/* webpackChunkName: */ ) path '/completed' 'Completed' import "about" '../views/Completed.vue' Our application entry component would also have a link to the completed. section, either as a replacement to the about page or an add-on Completed < = > router-link to "/completed" </ > router-link In the end, we should have something similar to this: We have a basic layout up, and a first taste of what testing involves. To dive or not to dive is the question I pose to you. Hush for a moment and let it settle. We will proceed with our application in an upcoming article. Be sure to check the code, if need be, from repo. Specifically, the project tag . TheGreenCodes awesome-todo v0.1.0 Stick around for a while as we delve more into the internals; and yes, we can continue this conversation on tech twitter, where Potato, oh, my bad, and I, , talk everything between code and smelling flowers over the weekends. Larry Marvin Peace out. A small laugh, in case Lewis , finds himself here again: 'Kuingia kimahuru'  - which means, at least for us, going in without tests. Also published on: https://thegreencodes.com/vue-unit-testing-tests-must-fail

Initialized

Target

Twitter

2022 - HackerNoon Contributor of the Year - Project Management

2022 - HackerNoon Contributor of the Year - Software Architecture

Portfolio

Buy Me a Coffee

Nominated for 2022 - HackerNoon Contributor of the Year - Project Management

Nominated for 2022 - HackerNoon Contributor of the Year - Software Architecture

Too Long; Didn't Read

Get free API security automated scan in minutes

An Example of True Test Driven Development in Vue

An Example of True Test Driven Development in Vue

Too Long; Didn't Read

Companies Mentioned

@marvin

RELATED STORIES