React 16 Jest如何进行异步程序测试

简介: 转载地址React 16 Jest如何进行异步程序测试项目初始化git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git cd webpack4-react16-reactrouter-demogit fetch origingit checkout v_1.0.25npm install异步程序测试首先,在Jest中启用Babel支。

转载地址

React 16 Jest如何进行异步程序测试

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.25
npm install

异步程序测试

首先,在Jest中启用Babel支。执行如下安装命令

npm install babel-jest babel-core regenerator-runtime --save-dev

下面实现一个简单的模块,从API中获取用户数据并返回用户名。

src/lib/user.js添加如下代码

import request from './request';

static getUserName(userID) {
  return request(`/users/${userID}`).then(user => user.name);
}


在上面的实现中,我们希望request.js模块返回一个promise。然后通过传递用户ID来获取用户信息,最后得到一个用户名称。
request.js的获取用户信息的实现如下:src/lib/request.js

const http = require('http');

export default function request(url) {
  return new Promise((resolve) => {
    http.get({
      path: url,
    }, (response) => {
      let data = '';
      response.on('data', (o) => {
        data += o;
        return data;
      });
      response.on('end', () => resolve(data));
    });
  });
}

这里的话希望在测试中不访问网络,所以在__mocks__文件夹中创建一个request.js,手动模拟网络请求(该文件夹区分大小写,'__MOCKS__'是不起作用的)。
它可能看起来像这样src/lib/__mocks__/request.js

const users = {
  4: {
    name: 'Mark',
  },
  5: {
    name: 'Paul',
  },
};

export default function request(url) {
  return new Promise((resolve, reject) => {
    const userID = parseInt(url.substr('/users/'.length), 10);
    process.nextTick(() => {
      if (users[userID]) {
        return resolve(users[userID]);
      }
      return reject({
        error: `User with ${userID} not found.`,
      });
    });
  });
}


现在为这个异步的功能编写一个测试。src/__tests__/user_async.test.js

import Users from '../lib/user';

jest.mock('../lib/request');

// The assertion for a promise must be returned.
it('works with promises', () =>
  // expect.assertions(1); // 当前版本加了这行总是报错,暂时未注释
  Users
    .getUserName(4)
    .then(data => expect(data).toEqual('Mark')));

运行测试,正常通过测试,如果问题可加群沟通

jest.mock('../lib/request')会告诉Jest去使用我们手动模拟的mock,'it'期望返回一个Promise,这个Promise的返回结果是resloved。
只要最后返回一个Promise,我们就可以链接尽可能多的Promise,并且随时调用'expect'。

.resolves

有一种不那么冗长的方式是使用'resolves',让它与任何其他匹配器一起unwrap一个fulfilled promise的值。
如果promise是rejected,则断言将失败。如下

it('works with resolves', () => {
  expect.assertions(1);
  return expect(user.getUserName(5)).resolves.toEqual('Paul');
});

async/await

使用async/await语法编写测试很容易。可以写一个和上面实例一致的测试。如下

import Users from '../lib/user';

jest.mock('../lib/request');

it('works with async/await', async () => {
  const data = await Users.getUserName(4);
  expect(data).toEqual('Mark');
});

it('works with async/await and resolves', async () => {
  expect.assertions(1);
  await expect(Users.getUserName(5)).resolves.toEqual('Paul');
});

为了使得测试中支持 async/await, 需要安装 babel-preset-env 并且在开通这个属性在.babelrc文件中.

Error handling

可以使用.catch方法处理错误。
确保添加expect.assertions以验证是否调用了一定数量的断言。
否则,一个fulfilled promise不会使测试失败:如下

import Users from '../lib/user';

jest.mock('../lib/request');

test('tests error with promises', async () => {
  expect.assertions(1);
  return Users.getUserName(2).catch(e =>
    expect(e).toEqual({
      error: 'User with 2 not found.',
    }));
});

it('tests error with async/await', async () => {
  expect.assertions(1);
  try {
    await Users.getUserName(1);
  } catch (e) {
    expect(e).toEqual({
      error: 'User with 1 not found.',
    });
  }
});

.rejects

.rejects帮助程序就像.resolves帮助程序一样。
如果promise是满足的,测试将自动失败。

import Users from '../lib/user';

jest.mock('../lib/request');
it('tests error with rejects', () => {
  expect.assertions(1);
  return expect(Users.getUserName(3)).rejects.toEqual({
    error: 'User with 3 not found.',
  });
});

it('tests error with async/await and rejects', async () => {
  expect.assertions(1);
  await expect(Users.getUserName(3)).rejects.toEqual({
    error: 'User with 3 not found.',
  });
});

项目实践地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag:v_1.0.26

目录
相关文章
|
2月前
|
JavaScript 前端开发 测试技术
jest测试核心
jest测试核心
19 2
|
2月前
|
资源调度 前端开发 JavaScript
React的测试:使用Jest和React Testing Library进行深入探索
【4月更文挑战第25天】本文探讨了使用Jest和React Testing Library进行React测试的方法。Jest是Facebook推出的JavaScript测试框架,适合React测试,提供全面的API和功能。React Testing Library侧重于组件行为,提倡按用户交互方式测试。安装这两个工具后,可通过编写测试用例(如模拟点击事件)来验证组件功能。运行Jest可执行测试并显示结果。此外,还介绍了高级测试技巧和模拟功能,强调了它们对于确保组件正确性、提升开发效率的重要性。
|
27天前
|
前端开发 JavaScript 测试技术
Jest与React Testing Library:前端测试的最佳实践
Jest和React Testing Library是React应用测试的核心工具。安装相关依赖后,在`jest.config.js`中配置Jest。测试时,编写描述性测试用例,使用`render`、`fireEvent`和`screen`来检查组件行为。Jest提供模拟功能,如模拟API调用。测试组件交互性时,模拟用户行为并验证状态变化。确保覆盖边缘情况,使用代码覆盖率报告评估测试完整性,并将测试集成到CI流程中。
19 1
|
9天前
|
JavaScript 前端开发
测试框架 Jest 实用教程
测试框架 Jest 实用教程
7 0
|
2月前
|
前端开发 JavaScript Linux
relectron框架——打包前端vue3、react为pc端exe可执行程序
relectron框架——打包前端vue3、react为pc端exe可执行程序
67 1
|
2月前
|
JavaScript 安全 编译器
【TypeScript 技术专栏】TypeScript 与 Jest 测试框架
【4月更文挑战第30天】本文探讨了TypeScript与Jest测试框架的结合在确保代码质量和稳定性上的重要性。Jest以其易用性、内置断言库、快照测试和代码覆盖率分析等特点,为TypeScript提供全面的测试支持。两者结合能实现类型安全的测试,提高开发效率,并涵盖各种测试场景,包括异步操作。通过实际案例分析,展示了如何有效利用这两个工具提升测试质量和开发效率,为项目成功奠定基础。
|
2月前
|
JavaScript 前端开发 测试技术
Jest测试核心
Jest测试核心
22 0
|
2月前
|
资源调度 前端开发 数据可视化
【第47期】一文了解React测试
【第47期】一文了解React测试
42 0
|
前端开发 UED
react学习系列6 react-router 实现异步按需加载模块
按需加载模块的目的是实现代码分隔,用户打开首页时不用下载全部的代码,打开特定的页面加载特定的代码。提高用户体验。 如果使用的是react-router,官网文档给出的 方案 是用webpack的bundle-loader 你可能也见过require.ensure。
1264 0
|
2月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
218 0