通过玩笑模拟测试 axios 变得不确定

Question

我在这里做错了什么？ 我已经在这几天了，似乎无法弄清楚我正在尝试测试的代码的问题。

这是我对 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.log(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: 'user@test.com',
            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": "user@test.com", "firstName": "Administrator", "id": 1, "lastName": "System", "role": {"description": "Administers the systems and user.", "id": 1, "roleName": "Administrator"}, "username": "admin"}]}}
Received: undefined

收到的东西不断地带着undefined的东西回来，我很难理解为什么。

我的第一个想法可能是我正在删除的 object 但看起来当我更改它时，收到的仍然不正确。

Answer 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.log(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: 'user@test.com',
            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