jest.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  preset: '@vue/cli-plugin-unit-jest',
+  preset: "@vue/cli-plugin-unit-jest"
 };

package.json

@@ -12,6 +12,7 @@
     "api": "fruit-api"
   },
   "dependencies": {
+    "axios": "^0.21.0",
     "core-js": "^3.6.5",
     "fruit-api": "^1.1.3",
     "vue": "^2.6.11",

src/main.js

@@ -2,8 +2,10 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import axios from "axios";
 
 Vue.config.productionTip = false;
+Vue.prototype.$http = axios;
 
 new Vue({
   router,

src/views/Fruits.vue

@@ -1,11 +1,26 @@
 <template>
   <div>
     <h1>Fruits Directory</h1>
+    {{ fruits }}
   </div>
 </template>
 
 <script>
 export default {
-  name: "Fruits"
+  name: "Fruits",
+  data() {
+    return {
+      fruits: []
+    };
+  },
+  async mounted() {
+    await this.getFruits();
+  },
+  methods: {
+    async getFruits() {
+      const response = await this.$http.get("http://localhost:3000/fruit");
+      this.fruits = response.data.data;
+    }
+  }
 };
 </script>

tests/unit/example.spec.js

@@ -1,12 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import HelloWorld from '@/components/HelloWorld.vue';
-
-describe('HelloWorld.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'new message';
-    const wrapper = shallowMount(HelloWorld, {
-      propsData: { msg },
-    });
-    expect(wrapper.text()).toMatch(msg);
-  });
-});

tests/unit/global.spec.js

@@ -0,0 +1,35 @@
+import { mount } from "@vue/test-utils";
+import mockAxios from "axios";
+import App from "../../src/App.vue";
+import Fruits from "../../src/views/Fruits.vue";
+
+describe("App", () => {
+  const wrapper = mount(App, { stubs: ["router-view"] });
+
+  it("should be a Vue instance", () => {
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.find("#app")).toBeTruthy();
+  });
+});
+
+jest.mock("axios", () => ({
+  get: jest.fn(() => Promise.resolve({ data: { data: "value" } }))
+}));
+
+it("should get fruits from fruit-api on mounted", async () => {
+  const wrapper = mount(Fruits, {
+    mocks: {
+      $http: mockAxios
+    }
+  });
+
+  expect(wrapper.vm.fruits).toEqual([]);
+
+  // We need to wait the nextTick to check API response (async).
+  await wrapper.vm.$nextTick(() => {
+    expect(wrapper.vm.fruits).toEqual("value");
+  });
+});

yarn.lock

@@ -2210,6 +2210,13 @@ aws4@^1.8.0:
   resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.11.0.tgz?cache=0&sync_timestamp=1604103580457&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faws4%2Fdownload%2Faws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=
 
+axios@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.0.tgz#26df088803a2350dff2c27f96fef99fe49442aca"
+  integrity sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -5047,7 +5054,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.10.0:
   version "1.13.0"
   resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
   integrity sha1-tC6Nk6Kn7qXtiGM2dtZZe8jjhNs=