Flutter网络模拟插件net_mock的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter网络模拟插件net_mock的使用

net_mock 是一个 Dart 包,简化了在测试中模拟 HTTP 请求的过程。它受到 NetMock 的启发,并通过添加一层语法糖来扩展 http.MockClient 包。这使得定义和管理预期请求和响应变得更加简单,使你能够专注于编写清晰简洁的测试。

特性

  1. 模拟所有 HTTP 方法的 HTTP 请求和响应。
  2. 简化的 API 用于设置模拟。

开始使用

前提条件

要使用 net_mock,请确保满足以下条件:

  1. Dart SDK 2.12.0 或更高版本。
  2. 一个 Flutter 或 Dart 项目。

安装

net_mock 添加到你的 pubspec.yaml 文件中:

dependencies:
  net_mock: ^1.0.7

然后运行 flutter pub get 来安装该包。

使用方法

基本设置

以下是一个基本示例,演示如何使用 net_mock 在测试中模拟 GET 请求:

void main() {
  late NetMock netMock;
  late NumberRepository sut;

  setUp(() {
    netMock = NetMock();
    sut = NumberRepository(client: netMock.client);
  });

  test(
    "should return random fact for number",
    () async {
      // 添加一个模拟请求
      netMock.addMock(
        request: NetMockRequest(
          url: Uri.parse("http://numbersapi.com/42"), // 请求的 URL
          method: Method.get, // 请求的方法
          headers: { // 请求的头部信息
            HttpHeaders.contentTypeHeader: "application/json; charset=utf-8"
          },
        ),
        response: NetMockResponse( // 模拟的响应
          code: 200, // 响应的状态码
          body: "42 is the number of US gallons in a barrel of oil.", // 响应的正文
        ),
      );

      // 调用被测对象的函数
      final result = await sut.getFactForNumber(number: 42);

      // 验证结果是否符合预期
      expect(
        result,
        equals("42 is the number of US gallons in a barrel of oil."),
      );
    },
  );
}

// 被测对象的类
class NumberRepository {
  final Client client;

  NumberRepository({required this.client});

  Future<String> getFactForNumber({required int number}) async {
    final response = await client.get(
      Uri.parse("http://numbersapi.com/$number"), // 请求的 URL
      headers: {
        HttpHeaders.contentTypeHeader: "application/json; charset=utf-8" // 请求的头部信息
      },
    );
    return response.body; // 返回响应的正文
  }
}

更多关于Flutter网络模拟插件net_mock的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网络模拟插件net_mock的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用net_mock插件来模拟网络请求的示例代码。net_mock插件允许你在开发过程中拦截和模拟HTTP请求,这对于测试网络相关的功能非常有用。

首先,确保你的Flutter项目已经添加了net_mock依赖。在pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  net_mock: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来,我们来看如何使用net_mock来模拟网络请求。

示例代码

  1. 配置net_mock

在你的Flutter应用的入口文件(通常是main.dart)中,配置net_mock

import 'package:flutter/material.dart';
import 'package:net_mock/net_mock.dart';
import 'package:http/http.dart' as http;

void main() {
  // 使用NetMock拦截HTTP请求
  NetMock.bootstrap(() async {
    // 注册一个模拟的GET请求
    NetMock.registerUri(
      predicate: (Uri uri) => uri.path == '/api/data',
      method: 'GET',
      response: (request) async => http.Response(
        '{"key": "value"}',
        200,
        headers: {'Content-Type': 'application/json'},
      ),
    );

    // 注册一个模拟的POST请求
    NetMock.registerUri(
      predicate: (Uri uri) => uri.path == '/api/submit',
      method: 'POST',
      response: (request) async => http.Response(
        '{"message": "success"}',
        201,
        headers: {'Content-Type': 'application/json'},
      ),
    );

    // 运行你的应用
    runApp(MyApp());
  });
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('NetMock Demo'),
        ),
        body: NetworkDemo(),
      ),
    );
  }
}
  1. 创建网络请求页面

接下来,创建一个页面来进行实际的网络请求,并展示结果。在这个例子中,我们将创建一个NetworkDemo页面,其中包含两个按钮,一个用于发起GET请求,另一个用于发起POST请求。

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class NetworkDemo extends StatefulWidget {
  @override
  _NetworkDemoState createState() => _NetworkDemoState();
}

class _NetworkDemoState extends State<NetworkDemo> {
  String _getResponse = '';
  String _postResponse = '';

  void _makeGetRequest() async {
    try {
      var response = await http.get(Uri.parse('http://localhost:8080/api/data'));
      setState(() {
        _getResponse = response.body;
      });
    } catch (e) {
      setState(() {
        _getResponse = 'Error: ${e.toString()}';
      });
    }
  }

  void _makePostRequest() async {
    try {
      var response = await http.post(Uri.parse('http://localhost:8080/api/submit'),
          body: {'key': 'value'});
      setState(() {
        _postResponse = response.body;
      });
    } catch (e) {
      setState(() {
        _postResponse = 'Error: ${e.toString()}';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text('GET Request Result:', style: TextStyle(fontSize: 18)),
          Text(_getResponse, style: TextStyle(fontSize: 16)),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _makeGetRequest,
            child: Text('Make GET Request'),
          ),
          SizedBox(height: 40),
          Text('POST Request Result:', style: TextStyle(fontSize: 18)),
          Text(_postResponse, style: TextStyle(fontSize: 16)),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _makePostRequest,
            child: Text('Make POST Request'),
          ),
        ],
      ),
    );
  }
}

运行应用

现在,你可以运行你的Flutter应用。当你点击“Make GET Request”按钮时,应用将发起一个GET请求,但由于我们使用了net_mock来拦截这个请求,它将返回我们注册的模拟响应{"key": "value"}。同样地,当你点击“Make POST Request”按钮时,应用将返回模拟的POST请求响应{"message": "success"}

通过这种方式,你可以在开发过程中模拟各种网络响应,而无需依赖实际的网络请求,这对于测试和调试非常有帮助。

回到顶部