{"id":5515,"date":"2022-12-05T06:55:16","date_gmt":"2022-12-05T06:55:16","guid":{"rendered":"https:\/\/tuvoc.com\/?p=5515"},"modified":"2024-06-13T07:28:36","modified_gmt":"2024-06-13T07:28:36","slug":"basics-of-unit-testing-in-vue","status":"publish","type":"post","link":"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/","title":{"rendered":"Basics of Unit Testing In Vue"},"content":{"rendered":"<h2><span style=\"font-weight: 600;\">Unit Testing<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Testing will let you know if the app you have created will work as you have intended for the end-users. It&#8217;s tough to achieve perfection with everything, but the quality is something every developer should strive for. Testing your codes will help you better your software structure. Today, we are talking about unit testing in Vue, but before that, let&#8217;s dive right into understanding unit testing.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The three levels of testing are unit testing, integration testing, and end-to-end testing.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So what is unit testing? It is testing individual units of code free from code dependencies. For error-free, consistent code, unit testing is the first line of defense for developers.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It improves the maintainability of the code and is a fundamental part of the TDD (test-driven development) process.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To constantly execute the unit testing, it is combined with continuous integration. The unit test will help you find bugs and defects early in the development process, long before your app reaches the end user.<\/span><\/p>\n<h2><span style=\"font-weight: 600;\">Things To Be Tested<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Many a time, it is not possible to test everything all the time. Therefore, the focus of testing should be more on the things your end-user will interact with, and get output from.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Inputs such as query strings, props, data, lifecycle methods, and data stores should be checked.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Outputs will include rendered output, data results, events, data store updates, and dispatches.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These key aspects will ensure a seamless experience for your end user. Unit testing complex logic will need updating during the code refactor.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Other things to keep in mind are,<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Events such as &#8216;if that, then that&#8217; should be tested. For example, what will happen if a specific button is clicked?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Specific inputs or props should produce specific results.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Implementation details, the underlying business logic used by a component to result in an output, based on the input given.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 600;\">Unit Testing in Vue<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">For any Single page application framework like Vue, components are the integral parts. Therefore, the unit testing in Vue should be focused on testing these components in a Vue application.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For that, there are testing environments. The key aspects of any good test environment are as below:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">They make tests fun and easy to write<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">They can help you write tests fast<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">They will execute tests with a single command<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Tests will run as quickly as possible<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">These two fit all the aspects in the best possible way:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Vite<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Vitest<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">They make unit testing in Vue a walk in the park and not a chore. Choosing the right testing environment and framework will encourage you to test more components, and eventually, take you to a better product.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s go deeper into Unit testing tools for Vue.<\/span><\/p>\n<h3><b>Tools for Unit Testing in Vue<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Unit test framework Vitest and utility library Vue Test Utils are the tools that you can use for unit testing in Vue.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In fact, Vitest can also be used for React, Svelte, Lit, and many more, apart from Vue. Its configuration with Vite makes the execution of the unit test faster. If a developer is familiar with JEst, Vitest would be easy to adapt as the Vites API is compatible with Jest.<\/span><\/p>\n<h4><b>1. Vue Test Utils<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">These are Vue Test Utils functionalities to be aware of:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Finding HTML components for testing (findAll(&#8216;h2&#8217;))<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Flushing all Promises (flushPromises())<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Trigger Events on Click (trigger)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Check emitted events (emitted)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mounting components (mount, shallowMount)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Setting props data (setProps)<\/span><\/li>\n<\/ul>\n<h4><b>2. Vitest<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Vitest provides you with this set of functionalities:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Write unit tests (it, describe)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Command in-line tool to run tests and check the test coverage<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">See test and coverage results<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Setup and Teardown (beforeEach, beforeAll, afterEach, afterAll)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Check against expected values (expect, toContain, toMatch, etc.)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mocking (mockResolvedValue, mockRejectedValue)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Here, Vue Test Utils provide test utilities that are Vue-specific, and Vitest will provide the generic functionality to write these tests.<\/span><\/p>\n<h2><span style=\"font-weight: 600;\">Running the Test<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now that you know the tools, here are some of the things to know about running the unit testing in Vue.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The naming convention for Vue testing is formatted like &lt;componentName&gt;.spec.js. Here, the component name should be multiple words instead of using just the &lt;header&gt;, so it does not conflict with HTML.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Each component of your Vue project will have one unit test file for it. There can be single or multiple unit tests in those unit files.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In the component folder, place unit test files in a sub-folder as (src\/components\/_tests_).<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You can run tests in Vitest as follows (an example):<\/span><\/p>\n<p><span style=\"font-weight: 400;\">$ npm run test:unit<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u2713 src\/components\/__tests__\/ProjectHeader.spec.js<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u2713 src\/components\/__tests__\/ProjectBanner.spec.js<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u2713 src\/components\/__tests__\/ProjectFooter.spec.js<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u2713 src\/components\/__tests__\/App.spec.js<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">All available commands that are run via npm for your project will be defined in package.json under the scripts field.<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Vitest runs tests in the watch mode by default. This will result in the test suite being re-executed on each save. Update the test:unit configuration in package.json and include the run argument as given below, so that Vue will run only once without the watch mode:<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">&#8220;test:unit&#8221;: &#8220;vitest run &#8211;environment jsdom&#8221;,<\/span><\/p>\n<h2><span style=\"font-weight: 600;\">Things To Consider<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Here are some things you need to consider while unit testing in Vue.<\/span><\/p>\n<h3><b>Code Coverage<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">It is important to know how much of your source code is actually getting tested when you unit test.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In Vitest, it is flagged with &#8211;coverage<\/span><\/p>\n<p><span style=\"font-weight: 400;\">After the unit test is run, the coverage will be reported with the number of statements, branches, functions, and lines that were part of your test.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Moreover, npm run test:ui will load these results in your default web browser to help you see where the coverage is missing in your unit test.<\/span><\/p>\n<h3><b>Structure<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Some of the important aspects of your Unit testing in Vue are as follows.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Each unit test suite will have a related set of unit tests.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To create independent test functions, use beforeEach() and afterEach().<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">If there are libraries used within the Vue component that you need to test, create mocks for them.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To update prop data within test functions, render components in beforeEach()<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Test individual components by using shallowMount() rather than mount()<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 600;\">Conclusion<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">These are the basic components of unit testing in Vue. We have discussed what unit testing is and why it makes sense for Vue. Which components should you be testing and what are the tools for unit testing in Vue? And finally, some things to keep in mind as you run your unit testing.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The most important takeaway here is to focus on the inputs and outputs concerning the end user and keep your code bug-free right at the earlier stages of development.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Unit Testing Testing will let you know if the app you have created will work as you have intended for the end-users. It&rsquo;s tough to achieve perfection with everything, but the quality is something every developer should strive for. Testing your codes will help you better your software structure. Today, we are talking about unit [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":5522,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-5515","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tuvoc"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Beginning Vue Unit Testing: Basics | Tuvoc Technologies<\/title>\n<meta name=\"description\" content=\"Learn the core ideas behind Vue.js unit testing. Start using fundamental approaches to create solid Vue applications.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beginning Vue Unit Testing: Basics | Tuvoc Technologies\" \/>\n<meta property=\"og:description\" content=\"Learn the core ideas behind Vue.js unit testing. Start using fundamental approaches to create solid Vue applications.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/\" \/>\n<meta property=\"og:site_name\" content=\"Tuvoc Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/tuvoctechnologies\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-05T06:55:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-13T07:28:36+00:00\" \/>\n<meta name=\"author\" content=\"Kishan Lashkari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Tuvocpvtltd\" \/>\n<meta name=\"twitter:site\" content=\"@Tuvocpvtltd\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kishan Lashkari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/\"},\"author\":{\"name\":\"Kishan Lashkari\",\"@id\":\"https:\/\/www.tuvoc.com\/#\/schema\/person\/a9df2f2c8d88eca0cbe849020df8e8d1\"},\"headline\":\"Basics of Unit Testing In Vue\",\"datePublished\":\"2022-12-05T06:55:16+00:00\",\"dateModified\":\"2024-06-13T07:28:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/\"},\"wordCount\":1115,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.tuvoc.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Unit-testing-vue.svg\",\"articleSection\":[\"Tuvoc\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/\",\"url\":\"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/\",\"name\":\"Beginning Vue Unit Testing: Basics | Tuvoc Technologies\",\"isPartOf\":{\"@id\":\"https:\/\/www.tuvoc.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Unit-testing-vue.svg\",\"datePublished\":\"2022-12-05T06:55:16+00:00\",\"dateModified\":\"2024-06-13T07:28:36+00:00\",\"description\":\"Learn the core ideas behind Vue.js unit testing. Start using fundamental approaches to create solid Vue applications.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#primaryimage\",\"url\":\"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Unit-testing-vue.svg\",\"contentUrl\":\"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Unit-testing-vue.svg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.tuvoc.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Basics of Unit Testing In Vue\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.tuvoc.com\/#website\",\"url\":\"https:\/\/www.tuvoc.com\/\",\"name\":\"Tuvoc Technologies\",\"description\":\"Top Secure Web &amp; Mobile Application Development Company\",\"publisher\":{\"@id\":\"https:\/\/www.tuvoc.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.tuvoc.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.tuvoc.com\/#organization\",\"name\":\"Tuvoc Technologies\",\"url\":\"https:\/\/www.tuvoc.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.tuvoc.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2023\/07\/Tuvoc-1.svg\",\"contentUrl\":\"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2023\/07\/Tuvoc-1.svg\",\"width\":1,\"height\":1,\"caption\":\"Tuvoc Technologies\"},\"image\":{\"@id\":\"https:\/\/www.tuvoc.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/tuvoctechnologies\/\",\"https:\/\/x.com\/Tuvocpvtltd\",\"https:\/\/www.instagram.com\/tuvocpvtltd\/\",\"https:\/\/www.linkedin.com\/company\/tuvoc-technologies\/people\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.tuvoc.com\/#\/schema\/person\/a9df2f2c8d88eca0cbe849020df8e8d1\",\"name\":\"Kishan Lashkari\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.tuvoc.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/28f6a8beb1410ad90d8584f9e2eafcf9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/28f6a8beb1410ad90d8584f9e2eafcf9?s=96&d=mm&r=g\",\"caption\":\"Kishan Lashkari\"},\"url\":\"https:\/\/www.tuvoc.com\/author\/kishan_lashkari\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Beginning Vue Unit Testing: Basics | Tuvoc Technologies","description":"Learn the core ideas behind Vue.js unit testing. Start using fundamental approaches to create solid Vue applications.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/","og_locale":"en_US","og_type":"article","og_title":"Beginning Vue Unit Testing: Basics | Tuvoc Technologies","og_description":"Learn the core ideas behind Vue.js unit testing. Start using fundamental approaches to create solid Vue applications.","og_url":"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/","og_site_name":"Tuvoc Technologies","article_publisher":"https:\/\/www.facebook.com\/tuvoctechnologies\/","article_published_time":"2022-12-05T06:55:16+00:00","article_modified_time":"2024-06-13T07:28:36+00:00","author":"Kishan Lashkari","twitter_card":"summary_large_image","twitter_creator":"@Tuvocpvtltd","twitter_site":"@Tuvocpvtltd","twitter_misc":{"Written by":"Kishan Lashkari","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#article","isPartOf":{"@id":"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/"},"author":{"name":"Kishan Lashkari","@id":"https:\/\/www.tuvoc.com\/#\/schema\/person\/a9df2f2c8d88eca0cbe849020df8e8d1"},"headline":"Basics of Unit Testing In Vue","datePublished":"2022-12-05T06:55:16+00:00","dateModified":"2024-06-13T07:28:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/"},"wordCount":1115,"commentCount":0,"publisher":{"@id":"https:\/\/www.tuvoc.com\/#organization"},"image":{"@id":"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Unit-testing-vue.svg","articleSection":["Tuvoc"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/","url":"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/","name":"Beginning Vue Unit Testing: Basics | Tuvoc Technologies","isPartOf":{"@id":"https:\/\/www.tuvoc.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#primaryimage"},"image":{"@id":"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Unit-testing-vue.svg","datePublished":"2022-12-05T06:55:16+00:00","dateModified":"2024-06-13T07:28:36+00:00","description":"Learn the core ideas behind Vue.js unit testing. Start using fundamental approaches to create solid Vue applications.","breadcrumb":{"@id":"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#primaryimage","url":"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Unit-testing-vue.svg","contentUrl":"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2022\/12\/Unit-testing-vue.svg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tuvoc.com\/blog\/basics-of-unit-testing-in-vue\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.tuvoc.com\/"},{"@type":"ListItem","position":2,"name":"Basics of Unit Testing In Vue"}]},{"@type":"WebSite","@id":"https:\/\/www.tuvoc.com\/#website","url":"https:\/\/www.tuvoc.com\/","name":"Tuvoc Technologies","description":"Top Secure Web &amp; Mobile Application Development Company","publisher":{"@id":"https:\/\/www.tuvoc.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tuvoc.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.tuvoc.com\/#organization","name":"Tuvoc Technologies","url":"https:\/\/www.tuvoc.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tuvoc.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2023\/07\/Tuvoc-1.svg","contentUrl":"https:\/\/www.tuvoc.com\/wp-content\/uploads\/2023\/07\/Tuvoc-1.svg","width":1,"height":1,"caption":"Tuvoc Technologies"},"image":{"@id":"https:\/\/www.tuvoc.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/tuvoctechnologies\/","https:\/\/x.com\/Tuvocpvtltd","https:\/\/www.instagram.com\/tuvocpvtltd\/","https:\/\/www.linkedin.com\/company\/tuvoc-technologies\/people\/"]},{"@type":"Person","@id":"https:\/\/www.tuvoc.com\/#\/schema\/person\/a9df2f2c8d88eca0cbe849020df8e8d1","name":"Kishan Lashkari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tuvoc.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/28f6a8beb1410ad90d8584f9e2eafcf9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/28f6a8beb1410ad90d8584f9e2eafcf9?s=96&d=mm&r=g","caption":"Kishan Lashkari"},"url":"https:\/\/www.tuvoc.com\/author\/kishan_lashkari\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/posts\/5515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/comments?post=5515"}],"version-history":[{"count":0,"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/posts\/5515\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/media\/5522"}],"wp:attachment":[{"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/media?parent=5515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/categories?post=5515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tuvoc.com\/wp-json\/wp\/v2\/tags?post=5515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}