Как я могу проверить этот код в шутку?


Как я могу проверить этот код в шутку?

18.09.2019 03:13:46 Просмотров 54 Источник

Я довольно новичок в издевательстве, и я понимаю утверждения и нахожу их легкими. Однако насмешка мучает мой мозг. У меня есть проект Vue в машинопись. Дело в том, что я застрял и не знаю, как тестировать вызовы API, которые я выставил в качестве классов обслуживания.

Мое мышление и дизайн кода

apiClient

Я создал один экземпляр axios под названием "apiClient", поэтому я могу иметь пользовательскую конфигурацию, доступную в любое время. Я сохранил это в корне моего проекта.

Сервисы

Я создал каждую конечную точку API в качестве" службы "в папке" Мои службы Каждая служба-это класс с кучей функций, которые я буду использовать для получения необходимых мне данных.

мой вопрос

  • Я понимаю, что вы хотите издеваться над всеми зависимостями, поэтому мне нужно начать с моего пользовательского экземпляра axios?

  • Нужно ли мне также издеваться над классом?

  • Как я буду издеваться над этим в целом? Я знаю, что в разработке самый общий ответ: "это зависит", но я прошел через документы jest, и я не нахожу некоторые из них ясными. (Может быть, это я подхожу к нему за ответом)
  • Что все это мне нужно, чтобы издеваться?

мой код

ExampleService.тс

import Approval from '@/interfaces/Approval';
import apiClient from '@/axiosConfig';
import { AxiosResponse } from 'axios';

export default class ExampleService {
    // Approvals
    public async getApprovals(id?: string) {
        if (id != null || id !== undefined) {
            return await apiClient
            .get(`/api//approval/${id}`)
            .then((response: AxiosResponse<Approval>) => {
                return response.data;
            });

        } else {
            return await apiClient
            .get('/api/approval')
            .then((response: AxiosResponse<Approval[]>) => {
                return response.data;
            });
        }
    }

    public async postApproval(approval: Approval) {
        return await apiClient
        .post('/api/approval', approval);
    }

    public async putAppoval(id: string, approval: Approval) {
        return await apiClient
        .put(`/api/approval/${id}`, approval);
    }

    public async deleteApproval(id: string) {
        return await apiClient
        .delete(`/api/approval/${id}`);
    }
}

CustomAxiosInstance.тс

import axios, { AxiosResponse } from 'axios';
const apiClient = axios.create({
    baseURL: `${process.env.VUE_APP_ROOT_API}`,
});

export default apiClient;

мои надежды

Хотелось бы получить пример кода того, как я буду издеваться над этим, и некоторое объяснение, почему вы выбрали метод, который выбрали. Пожалуйста, критикуйте и мой код. Я только хочу совершенствоваться.

У вопроса есть решение - Посмотреть?

Ответы - Как я могу проверить этот код в шутку? / How do I go about testing this code in jest?

Является ответом!
slideshowp2

18.09.2019 04:32:23

Модульный тест для этого класса не имеет ничего общего с Vue.js, вот решение, структура папок:

├── ExampleService.ts
├── __tests__
│   └── ExampleService.spec.ts
├── axiosConfig.ts
└── interfaces
    └── Approval.ts

2 directories, 4 files

Модульный тест, ExampleService.spec.ts:

import ExampleService from '../ExampleService';
import axios, { AxiosResponse } from 'axios';

jest.mock('axios', () => {
  return {
    create: jest.fn().mockReturnThis(),
    get: jest.fn()
  };
});

const exampleService = new ExampleService();

describe('ExampleService', () => {
  beforeEach(() => {
    (axios.create().get as jest.MockedFunction<typeof axios.get>).mockReset();
  });

  describe('#getApprovals', () => {
    const mockedResponse: AxiosResponse = {
      data: 'mocked data',
      status: 200,
      statusText: 'ok',
      headers: {},
      config: {}
    };
    it('should get approvals by id correctly', async () => {
      (axios.create().get as jest.MockedFunction<typeof axios.get>).mockResolvedValueOnce(mockedResponse);
      const actualValue = await exampleService.getApprovals('1');
      expect(actualValue).toEqual(mockedResponse.data);
      expect(axios.create().get).toBeCalledWith(`/api/approval/1`);
    });

    it('should get approvals correctly', async () => {
      (axios.create().get as jest.MockedFunction<typeof axios.get>).mockResolvedValueOnce(mockedResponse);
      const actualValue = await exampleService.getApprovals();
      expect(actualValue).toEqual(mockedResponse.data);
      expect(axios.create().get).toBeCalledWith(`/api/approval`);
    });
  });
});

Результат модульного теста с отчетом о покрытии:

 PASS  src/stackoverflow/57992553/__tests__/ExampleService.spec.ts (7.041s)
  ExampleService
    #getApprovals
      ✓ should get approvals by id correctly (14ms)
      ✓ should get approvals correctly (3ms)

-------------------|----------|----------|----------|----------|-------------------|
File               |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-------------------|----------|----------|----------|----------|-------------------|
All files          |    73.91 |    53.85 |    57.14 |    83.33 |                   |
 ExampleService.ts |       70 |    53.85 |    57.14 |       80 |          19,23,27 |
 axiosConfig.ts    |      100 |      100 |      100 |      100 |                   |
-------------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        8.532s

Я только тестирую getApprovals

Вот законченная демонстрация: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/57992553

https://stackoverflow.com/questions/57992553/how-do-i-go-about-testing-this-code-in-jest/57993993#comment102401242_57993993
Спасибо за помощь. У меня есть только один вопрос, мой Линтер кричит только на одну часть, шутка.MockedFunction в строках 15, 27 и 34. любое пространство имен 'шутку' не экспортировала членов MockedFunction'.ТС(2694)
https://stackoverflow.com/questions/57992553/how-do-i-go-about-testing-this-code-in-jest/57993993#comment102401295_57993993
@Sanwil9 это может быть проблема с версией. Пожалуйста, проверьте и обновите
https://stackoverflow.com/questions/57992553/how-do-i-go-about-testing-this-code-in-jest/57993993#comment102403846_57993993
Ах, да, мой пакет.в JSON был сгенерирован вю ЦПИ "ТС-шутку": "^23.0.0" ,"@видах/шутку": "^23.1.4", "@вю/Кинк-модуль-блок-шутку": "^3.11.0",
https://stackoverflow.com/questions/57992553/how-do-i-go-about-testing-this-code-in-jest/57993993#comment102403872_57993993
Я зафиксирую текущее состояние, обновлю, если оно сломается, я вернусь назад. Я понятия не имею, где все, что я должен перенастроить, если это необходимо. Мне придется поохотиться в документах
https://stackoverflow.com/questions/57992553/how-do-i-go-about-testing-this-code-in-jest/57993993#comment102525729_57993993
Кроме того, я обновил все, чтобы соответствовать. Он все еще жалуется. ТС-шутя говорит, что не поддерживают данное приложение. и все шутки связанные выделяется
https://stackoverflow.com/questions/57992553/how-do-i-go-about-testing-this-code-in-jest/57993993#comment102539811_57993993
@Sanwil9 вы можете взглянуть на демо, проверить версию и конфигурацию
Помочь в развитии проекта:
Закрыть X