很长一段时间,我在写Flutter单元测试时都非常苦恼,网络请求和网络图片要本地模拟非常困难,尽管网络请求有像http_mock_adapter这样的库,但是它仅仅是为了Dio设计,无法用于其它网络请求库如http亦或者Dart自带的网络请求方式。还有网络图片处理也是一个难题,比如当我们使用截图测试时,业务中使用了Image.network
,单元测试时就会抛出错误。
为了解决此类问题,我开发了一个工具http_miracle_mock,下面简单分享一下使用方式。
http_miracle_mock
Flutter项目的单元测试中拦截业务中的网络请求是一个很常见的场景,当前已有的框架有
- mockito: 不够简洁,需要大量代码
- http_mock_adapter: 仅支持Dio库
- network_image_mock: 仅支持图片
此库的目的为了解决以下问题
- 简单好用
- 兼容主流网络请求框架,如dio、http
- 仅仅处理网络相关问题,如常见的网络请求与图片资源等
开始使用
引入依赖
yaml
dev_dependencies:
http_miracle_mock: any
简单使用
模拟一个Get请求
dart
void main() async {
TestWidgetsFlutterBinding.ensureInitialized();
final HttpMiracleMock httpMiracleMock = HttpMiracleMock();
final httpClient = HttpClient();
test('test getUrl', () async {
var url = 'https://example.com/create';
var data = "resultGetUrl";
var uri = Uri.parse(url);
httpMiracleMock.open(url).reply(data);
final request = await httpClient.getUrl(uri);
final response = await request.close();
var responseData = await response.transform(utf8.decoder).join();
expect(responseData, data);
});
}
模拟一个图片
dart
testWidgets('test image using url png', (WidgetTester tester) async {
var data = File(path.join(Utils.currentPath, 'test', 'assets', 'test.png'));
var url = 'http://example.com/image.png';
httpMiracleMock.open(url).reply(data.readAsBytesSync());
await Utils.pumpWidgetWithImages(
tester,
Column(
children: [
Container(
child: Image.network(
url,
width: 100,
height: 100,
)),
],
),
[NetworkImage(url)],
);
await tester.pumpAndSettle();
await expectLater(
find.byType(Column),
matchesGoldenFile('snapshots/net_work_image_1.png'),
);
});
首先,初始化一下HttpMiracleMock
,然后使用httpMiracleMock.open
来提供需要拦截的网络请求的信息如请求链接、请求参数等,然后通过reply
填入该请求的返回结果。
更多使用可以参考这里
接口
为了使用更加简单,该库仅提供HttpMiracleMock
对象,该对象提供一个open
接口。
open
open方法主要用于定义需要拦截请求的信息,有以下参数
- url: 必填,拦截的请求链接,可选传入String,RegExp,Uri类型
- method: 可选,拦截请求方法(GET/POST)
- data: 可选,请求入参
- dataTransform: 可选,用于请求参数转换,如果某些请求因为兼容问题无法解析请求参数,可以先通过此回调进行自定义转换
method
、data
、dataTransform
都是可选参数,某些情况下比如url使用正则时会匹配到项目中多个不同请求,可以用这些更多的参数进行区分,让匹配更加精准。
该方法返回一个ResponseData
reply
- body: 必填,返回的数据内容
- statusCode: 可选,返回的状态的码
- headers: 返回的头部信息
源码地址
- pub地址:pub.dev/packages/ht...
- github地址:github.com/xuzhongpeng...