How to test vue.js component method with ajax request in mocha?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

// Assume you have a Vue.js component with a method that makes an AJAX request
// in a method called fetchData

import { expect } from 'chai';
import sinon from 'sinon';
import { shallowMount } from '@vue/test-utils';
import YourComponent from '@/path/to/YourComponent.vue';

describe('YourComponent', () => {
  let xhr, requests;

  beforeEach(() => {
    xhr = sinon.useFakeXMLHttpRequest();
    requests = [];
    xhr.onCreate = (req) => requests.push(req);
  });

  afterEach(() => {
    xhr.restore();
  });

  it('should fetch data successfully', (done) => {
    const wrapper = shallowMount(YourComponent);

    // Mock the successful AJAX response
    requests[0].respond(200, { 'Content-Type': 'application/json' }, JSON.stringify({ data: 'example' }));

    // Call the fetchData method that makes the AJAX request
    wrapper.vm.fetchData();

    // Wait for the AJAX request to complete
    setTimeout(() => {
      // Assert the component's data is updated after successful AJAX request
      expect(wrapper.vm.data).to.equal('example');
      done();
    });
  });

  it('should handle AJAX request error', (done) => {
    const wrapper = shallowMount(YourComponent);

    // Mock an error response from the AJAX request
    requests[0].respond(500, {}, JSON.stringify({ error: 'Error message' }));

    // Call the fetchData method that makes the AJAX request
    wrapper.vm.fetchData();

    // Wait for the AJAX request to complete
    setTimeout(() => {
      // Assert the component's error state is set after failed AJAX request
      expect(wrapper.vm.error).to.equal('Error message');
      done();
    });
  });
});

1
2
3
4

npm install sinon --save-dev
npm install @vue/test-utils --save-dev
npm install chai --save-dev
npm install mocha --save-dev