0

I have a vue component that fetches data from an api in the "created" function. I'm just getting up and running using the following testing stack:

  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/vue": "^5.8.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^27.4.6",
    "jest": "^27.4.7",
    "vue-jest": "^3.0.7",
    "webpack-dev-server": "^3.11.0"
  }

My current test:

import BatchCalendar from '../src/components/batch_calendar.vue';
import { render } from '@testing-library/vue';

test('It renders correctly and loads initial data', done => {
    const wrapper = await render(BatchCalendar);

        
    getByText('Calendar Notices');
});

I know that vue testing library abstracts some methods away from the core vue testing utilities, so I'm left with using the "render" method of vue testing library.

My question is how should I go about handling the API call in the vue created hook.

  1. Should all api calls (and also async methods?) be mocked?
  2. How/where do I place await/async functions?
  3. If I have a plugin (fullcalendar) that is making API requests on its own when rendering, how would I go about mocking/handling that?

Let me know if you need more info, thanks.

Improve this question
3
  • 1. yes 2. in test, you shouldn't use done for asynchronous tests, it's obsolete 3. preferably mock third-party libs in unit tests because they aren't your units. You won't naturally have the problem with testing with axios this way Commented Jan 19, 2022 at 18:22
  • @EstusFlask thanks so much for response. 1) Would you be able to throw a quick example together with the pieces that should get me to the end result? 2) My problem with the fullcalendar plugin is that I cannot control that it fires requests and then my tests throw errors/warnings. I'm wondering if there is a way I can shortcut them or swallow them. Commented Jan 19, 2022 at 19:43
  • 1
    Sorry, can't come up with full example. Basically you need to mock axios for your own requests, mock fullcalendar entirely or almost entirely (you shouldn't pollute your tests with third party libs but this especially applies to dom-oriented libs that Jest fake dom cannot handle), depending on how it's used, wait a bit for mocked response before asserting the result, e.g with flush-promises. Commented Jan 19, 2022 at 21:02
Related questions
19
vue-test-utils: How to test logic within mounted() lifecycle hook (with vuex)?
3
vue.js test-utils how to test functions in mounted lifecycle hook
9
Mock mounted hook Jest testing unit
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.