在浏览器平台测试中模拟 JS 对象

Question

我有这个简化的飞镖文件使用 dart:js:

（dataLayer 用于 Google 标签，如果有帮助的话）

@JS()
import 'package:js/js.dart';

@JS('dataLayer.push')
external void _push(data);

class Manager {
  void pushEvent(String event) {
    _push(event);
  }
}

在 Web 上，它运行正确并且正在 web/index.html 文件的脚本中创建 dataLayer 对象。

我正在尝试编写一个关于它的测试。我想验证是否使用正确的参数调用 dataLayer.push。

我运行我用命令测试

flutter test --platform chrome

但是我得到这个错误：

TypeError: Cannot read properties of undefined (reading 'push')

是否可以创建一个虚拟 dataLayer 变量（并且可能用手记录对方法 .push() 的调用）？如果是，如何？

这是我的尝试：

@TestOn('browser')

import 'package:flutter_test/flutter_test.dart';
import 'package:js/js.dart';
import 'my_project/my_file.dart';

class _DataLayer {
  void push(dynamic data) {}
}

@JS('dataLayer')
final dataLayer = _DataLayer();

void main() {
  test('It should push the event', () {
    Manager().pushEvent('myEvent');
  });
}

Answer 1

一种方法是在测试期间加载和使用自定义 HTML 文件，您可以在其中包含脚本来创建所需的 js 变量。

关注 instructions of the package test.

如果您的测试文件名为 folder/my_test.dart，那么您可以创建一个名为 (folder/my_test.html):

的 html 文件

<!doctype html>
<html>

<head>
  <title>Custom HTML file title</title>
  <link rel="x-dart-test" href="my_test.dart">
  <script src="packages/test/dart.js"></script>
  <script>
    window['dataLayer'] = [];
  </script>
</head>

</html>

见 and 。

然后你可以运行

dart test --platform chrome

但是，只有 dart test 支持，flutter test 不支持，请参阅 this issue。在其中，他们建议改为编写集成测试。

在浏览器平台测试中模拟 JS 对象

Mock JS object in tests on browser platform

flutter

flutter-test

flutter-web

flutter-js

flutter-web-browser