Блог

Я пытался издеваться над своими API с помощью jest.mock (), но я даже не могу заставить jest нормально вызывать эти api.

Я смог успешно издеваться над функцией, а затем издеваться над api следующим образом:

 wrapper.vm.getUser = jest.fn(() => Promise.resolve({}));
 

но я хотел бы издеваться над всеми API api/authApis.js напрямую, вместо того, чтобы перехватывать их в функции.

Я не могу этого сделать, потому this.$apis что отображается как неопределенное.

Как мне получить доступ к этому.$api.getUser() и вызвать его с помощью Jest?

tests/header.spec.js

 import { mount } from "@vue/test-utils";
import Header from "../components/Header.vue";

describe("Header", () => {
  it("returns the val from api", async () => {
    //setting multiUser true so button is visible
    const multiUsers = true;
    const wrapper = mount(Header, {
      propsData: {
        multiUsers
      }
    });


    console.log(wrapper.vm.getUser());

    const changeUsrBtn = wrapper.find("#btnChangeUser");
    //triggering the user btn with a click
    changeUsrBtn.trigger("click");
    expect(wrapper.find("button").text()).toBe("Change User");
    expect(wrapper.vm.getUser()).toHaveReturned();    
  });
});
 

Ошибка:

 FAIL  __tests__/header.spec.js
Header
  × returns the val from api (122 ms)

● Header › returns the val from api

  expect(received).toHaveReturned()

  Matcher error: received value must be a mock function

  Received has type:  object
  Received has value: {}

    23 |     expect(wrapper.find("button").text()).toBe("Change User");
    24 |
  > 25 |     expect(wrapper.vm.getUser()).toHaveReturned();
       |                                    ^
    26 |
    27 |   });
    28 | });

    at Object.<anonymous> (__tests__/header.spec.js:25:36)
    at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
    at runJest (node_modules/@jest/core/build/runJest.js:387:19)
    at _run10000 (node_modules/@jest/core/build/cli/index.js:408:7)
    at runCLI (node_modules/@jest/core/build/cli/index.js:261:3)

console.error
  TypeError: Cannot read property 'authService' of undefined
 

компоненты/Заголовок.vue

     async getUser() {
      this.showUserLoader = true;
      try {
        const {
          data: { userList }
        } = await 
        this.$apis.authService.getUser();
        this.$store.dispatch("auth/updateUsers", UserList);
      } catch (error) {
        console.error(error);
      } finally {
        this.showUserLoader = false;
      }
    }
...
 

api/authApis.js (Я хотел бы поиздеваться над всем этим файлом):

 export default $axios => ({
  getUser() {
    return $axios({
      url_instance: authInstance,
      method: "get",
      url_suffix: "/sc/typesOfUser",
    });
  },
  changeUser() {
    return $axios({
      url_instance: authInstance,
      method: "post",
      url_suffix: "/sc/changeUser"
    });
  },
...
})
 

Это зависит от того , как вы задаете глобальный this.$api , но если вы хотите создать макет всего файла (особенно с использованием экспорта по умолчанию), вам следует использовать __esModule свойство:

 jest.mock('./esModule', () => ({
  __esModule: true, // this property makes it work
  default: 'mockedDefaultExport',
  namedExport: jest.fn(),
}));
 

Дополнительные пояснения по умолчанию Jest mock и именованному экспорту.