时间戳

首页 > 解决方案 > 使用 jest 测试反应服务

reactjs - 使用 jest 测试反应服务

问题描述

有没有办法使用 jest 测试服务？我试图这样做，但测试似乎没有运行。

import { postAuthUser } from '../authService';

it('login user', () => {
  return postAuthUser({ username: 'user', password: 'password' }).then( data => {
    expect(data).toEqual({});
  });
});

我有这个，我正在尝试使用一项服务，但由于某种原因，它不起作用。

标签： reactjsjestjs

解决方案

我假设你的使用postAuthUser方法是这样的：authServiceaxios

authService.ts

import axios from 'axios';

export async function postAuthUser(auth) {
  return axios.post('https://github.com/mrdulin', auth);
}

单元测试：

import { postAuthUser } from './authService';
import axios from 'axios';

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

describe('authService', () => {
  describe('#postAuthUser', () => {
    it('login user', () => {
      (axios.post as jest.MockedFunction<typeof axios.post>).mockResolvedValueOnce({});
      return postAuthUser({ username: 'user', password: 'password' }).then(data => {
        expect(data).toEqual({});
        expect(axios.post).toBeCalledWith('https://github.com/mrdulin', { username: 'user', password: 'password' });
      });
    });
  });
});

覆盖率 100% 的单元测试结果：

 PASS  src/stackoverflow/53934331/authService.spec.ts
  authService
    #postAuthUser
      ✓ login user (5ms)

----------------|----------|----------|----------|----------|-------------------|
File            |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------------|----------|----------|----------|----------|-------------------|
All files       |      100 |      100 |      100 |      100 |                   |
 authService.ts |      100 |      100 |      100 |      100 |                   |
----------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.483s, estimated 4s

这是完成的演示： https ://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/53934331

推荐阅读