运行测试时出现“未找到：'dart:js' export 'dart:js' show allowInterop, allowInteropCaptureThis”错误

Question

In my Flutter app, I have a file called web.dart and inside it I have webSaveAs function which saves a file to my local machine in web.

@JS()
library main;

import 'package:js/js.dart';
import 'package:universal_html/html.dart';

/// Annotate `webSaveAs` to invoke JavaScript `window.webSaveAs`
@JS('webSaveAs')
external void webSaveAs(Blob blob, String fileName);

但是，当我运行任何导入我使用webSaveAs function 的小部件的测试（使用flutter test命令）时，我收到以下错误：

./../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/js-0.6.3-nullsafety.3/lib/js.dart:8:1: Error: Not found: 'dart:js'
export 'dart:js' show allowInterop, allowInteropCaptureThis;
^

我正在使用js: ^0.6.2 from https://pub.dev/packages/js ，这是flutter doctor命令的结果。

╰>>> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.25.0-8.3.pre, on macOS 11.2.1 20D74 darwin-x64, locale en-SG)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] IntelliJ IDEA Ultimate Edition (version 2019.3.1)
[✓] VS Code (version 1.53.2)
[✓] Connected device (1 available)

• No issues found!

有人可以帮我解决这个问题吗？ 提前致谢！

Answer 1

问题：

When you execute flutter test command, Flutter will compile the code in test files to native Dart and run inside a Dart VM where there is no Javascript support. 因此，它不会包含dart:js 。

---

解决方案：

You can create a dummy file (let's say web.test.dart ) like below to mock the functions that use package:js or dart:js package methods.

web.test.dart

import 'package:universal_html/html.dart';

void webSaveAs(Blob blob, String fileName) {
  // You can remove the below line below and include your own implementation if you need
  throw UnimplementedError();
}

然后创建一个新文件（比如说shared.dart ），如下所示。

shared.dart

export 'web.dart' if (dart.library.io) 'web.test.dart';

When you need to use webSaveAs function, instead of importing web.dart file, you should import shared.dart .

---

解释：

dart.library.io is available in Dart VM and dart.library.js is available in web.

在 web 中， if (dart.library.io)为false 。 因此，它将导入我们想要的web.dart 。

运行测试时， if (dart.library.io)为true ，因为测试在 Dart VM 中运行。 Hence, it will import web.test.dart which won't throw any errors since it does not import package:js or dart:js .

---

参考：

• https://github.com/dart-lang/sdk/issues/36557
• https://medium.com/@dvargahali/dart-2-conditional-imports-update-16147a776aa8