Получение неопределенности с помощью аксиом шутливого тестирования

Что я здесь делаю неправильно? Я занимаюсь этим уже несколько дней и, похоже, не могу понять проблему с кодом, который я пытаюсь протестировать.

Вот мой вызов API:

import axios from 'axios';
import { environment } from '../environments/environment';
import { AppPersons } from './usersUtils';

const getData = (): Promise<AppPersons[]> => {
  const config = {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('access_token')}`
    }
  };
  return axios
    .get(`${environment.userServiceURL}/persons`, config)
    .then(response => response.data._embedded.persons)
    .catch(err => {
      console.info(err);
    });
};
export default getData;

Вот мой тест:

import axios from 'axios';
import getData from '../utils/userData';

jest.mock('axios');

describe('user page page', () => {
  it('should fetch users', () => {
    const users = {
      _embedded: {
        person: [
          {
            role: {
              id: 1,
              roleName: 'Administrator',
              description: 'Administers the systems and user.'
            },
            active: true,
            email: '[email protected]',
            firstName: 'Administrator',
            lastName: 'System',
            username: 'admin',
            id: 1,
            _links: {
              self: { href: 'http://users:8080/users/api/data/persons/1' },
              person: {
                href: 'http://users:8080/users/api/data/persons/1{?projection}',
                templated: true
              },
              role: { href: 'http://users:8080/users/api/data/persons/1/role' }
            }
          }
        ]
      }
    };

    const response = { data: users };

    axios.get.mockImplementation(() => Promise.resolve(response));
    return getData().then(resp => expect(resp).toEqual(users));
  });
});

Результат:

Expected: {"_embedded": {"person": [{"_links": {"person": {"href": "http://users:8080/users/api/data/persons/1{?projection}", "templated": true}, "role": {"href": "http://users:8080/users/api/data/persons/1/role"}, "self": {"href": "http://users:8080/users/api/data/persons/1"}}, "active": true, "email": "[email protected]", "firstName": "Administrator", "id": 1, "lastName": "System", "role": {"description": "Administers the systems and user.", "id": 1, "roleName": "Administrator"}, "username": "admin"}]}}
Received: undefined

Полученное постоянно возвращается с undefined, и я изо всех сил пытаюсь понять, почему.

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

Попробуйте удалить оператор return, просто вызовите getData().then((resp) => expect(resp).toEqual(users));

— 13.12.2020 23:09

reactjs testing axios jestjs react-testing-library

13.12.2020 21:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

1 513

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны изменить издевательский ответ с users._embedded.person на users._embedded.persons. Вот почему вы получили undefined.

Например.

getData.ts:

import axios from 'axios';
import { environment } from './environment';
import { AppPersons } from './usersUtils';

const getData = (): Promise<AppPersons[]> => {
  const config = {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('access_token')}`,
    },
  };
  return axios
    .get(`${environment.userServiceURL}/persons`, config)
    .then((response) => response.data._embedded.persons)
    .catch((err) => {
      console.info(err);
    });
};
export default getData;

usersUtils.ts:

export interface AppPersons {}

environment.ts:

export const environment = {
  userServiceURL: '',
};

getData.test.ts:

import axios from 'axios';
import getData from './getData';

jest.mock('axios');

const maxios = axios as jest.Mocked<typeof axios>;

describe('user page page', () => {
  it('should fetch users', () => {
    const users = {
      _embedded: {
        persons: [
          {
            role: {
              id: 1,
              roleName: 'Administrator',
              description: 'Administers the systems and user.',
            },
            active: true,
            email: '[email protected]',
            firstName: 'Administrator',
            lastName: 'System',
            username: 'admin',
            id: 1,
            _links: {
              self: { href: 'http://users:8080/users/api/data/persons/1' },
              person: {
                href: 'http://users:8080/users/api/data/persons/1{?projection}',
                templated: true,
              },
              role: { href: 'http://users:8080/users/api/data/persons/1/role' },
            },
          },
        ],
      },
    };

    const response = { data: users };

    maxios.get.mockResolvedValue(response);
    return getData().then((resp) => {
      expect(resp).toEqual(users._embedded.persons);
      expect(maxios.get).toBeCalledWith('/persons', {
        headers: {
          Authorization: `Bearer null`,
        },
      });
    });
  });
});

результат модульного теста:

 PASS  examples/65280473/getData.test.ts
  user page page
    ✓ should fetch users (3 ms)

----------------|---------|----------|---------|---------|-------------------
File            | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------------|---------|----------|---------|---------|-------------------
All files       |   88.89 |      100 |   66.67 |   88.89 |                   
 environment.ts |     100 |      100 |     100 |     100 |                   
 getData.ts     |    87.5 |      100 |   66.67 |    87.5 | 15                
----------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.173 s

исходный код: https://github.com/mrdulin/jest-v26-codelab/tree/main/examples/65280473

14.12.2020 06:05