Steps to reproduce

1. Create sample counter app with flutter create
2. Replace sample app code with provided code
3. Run flutter test

Expected results

flutter test shouldn't fail because of existing dart:js_interop's ExternalDartReference and toExternalReference in source code

Actual results

flutter test fails because of dart:js_interop's ExternalDartReference and toExternalReference (see error logs). Should we not use these in our flutter code?

Code sample

Code sample

import 'dart:js_interop';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class ObjectThatUsesDartExternalReference {
  final ExternalDartReference reference;

  ObjectThatUsesDartExternalReference(this.reference);
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  final myObject = ObjectThatUsesDartExternalReference(
    () {}.toExternalReference,
  );

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Logs

Logs

~/repositories/sample_error_test$ flutter test
00:00 +0: loading /Users/ricardodurao/repositories/sample_error_test/test/widget_test.dart                                                                                                                                                  lib/main.dart:1:8: Error: Dart library 'dart:js_interop' is not available on this platform.
import 'dart:js_interop';
       ^
Context: The unavailable library 'dart:js_interop' is imported through these packages:

    /Users/ricardodurao/repositories/sample_error_test/test/widget_test.dart => package:sample_error_test => dart:js_interop

Detailed import paths for (some of) the these imports:

    listener.dart => /Users/ricardodurao/repositories/sample_error_test/test/widget_test.dart => package:sample_error_test/main.dart => dart:js_interop

lib/main.dart:10:9: Error: Type 'ExternalDartReference' not found.
  final ExternalDartReference reference;
        ^^^^^^^^^^^^^^^^^^^^^
lib/main.dart:68:11: Error: The getter 'toExternalReference' isn't defined for the class 'Null Function()'.
Try correcting the name to the name of an existing getter, or defining a getter or field named 'toExternalReference'.
    () {}.toExternalReference,
          ^^^^^^^^^^^^^^^^^^^
lib/main.dart:10:9: Error: 'ExternalDartReference' isn't a type.
  final ExternalDartReference reference;
        ^^^^^^^^^^^^^^^^^^^^^
00:00 +0 -1: loading /Users/ricardodurao/repositories/sample_error_test/test/widget_test.dart [E]                                                                                                                                           
  Failed to load "/Users/ricardodurao/repositories/sample_error_test/test/widget_test.dart": Compilation failed for testPath=/Users/ricardodurao/repositories/sample_error_test/test/widget_test.dart

To run this test again: /opt/homebrew/Caskroom/flutter/3.0.4/flutter/bin/cache/dart-sdk/bin/dart test /Users/ricardodurao/repositories/sample_error_test/test/widget_test.dart -p vm --plain-name 'loading /Users/ricardodurao/repositories/sample_error_test/test/widget_test.dart'
00:00 +0 -1: Some tests failed.                                                         

Flutter Doctor output

Doctor output

~/repositories/sample_error_test$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.0, on macOS 14.2.1 23C71 darwin-arm64, locale en-PT)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[!] Xcode - develop for iOS and macOS (Xcode 15.4)
    ✗ Unable to get list of installed Simulator runtimes.
    ! CocoaPods 1.12.1 out of date (1.13.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#updating-cocoapods for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.3)
[✓] VS Code (version 1.88.0)
[✓] Connected device (3 available)
[✓] Network resources

! Doctor found issues in 2 categories.

I've updated the code sample to not use any external dependencies so it's simpler to test.

Further testing reveals that this can happen with any class or extension method from dart:js_interop:

00:00 +0: loading /Users/ricardodurao/repositories/sample_error_test/test/widget_test.dart                                                                                                                                                  lib/main.dart:1:8: Error: Dart library 'dart:js_interop' is not available on this platform.
import 'dart:js_interop';
       ^
Context: The unavailable library 'dart:js_interop' is imported through these packages:

    /Users/ricardodurao/repositories/sample_error_test/test/widget_test.dart => package:sample_error_test => dart:js_interop

Detailed import paths for (some of) the these imports:

    listener.dart => /Users/ricardodurao/repositories/sample_error_test/test/widget_test.dart => package:sample_error_test/main.dart => dart:js_interop

lib/main.dart:2:8: Error: Dart library 'dart:js_interop_unsafe' is not available on this platform.
import 'dart:js_interop_unsafe';
       ^
Context: The unavailable library 'dart:js_interop_unsafe' is imported through these packages:

    /Users/ricardodurao/repositories/sample_error_test/test/widget_test.dart => package:sample_error_test => dart:js_interop_unsafe

Detailed import paths for (some of) the these imports:

    listener.dart => /Users/ricardodurao/repositories/sample_error_test/test/widget_test.dart => package:sample_error_test/main.dart => dart:js_interop_unsafe

lib/main.dart:11:9: Error: Type 'JSAny' not found.
  final JSAny reference;
        ^^^^^
lib/main.dart:44:13: Error: The getter 'toJS' isn't defined for the class 'String'.
Try correcting the name to the name of an existing getter, or defining a getter or field named 'toJS'.
    'hello'.toJS,
            ^^^^
lib/main.dart:11:9: Error: 'JSAny' isn't a type.
  final JSAny reference;

Hi @r-durao-pvotal, dart:js_interop and other web libraries are only available when you're targetting the web platform. flutter test by default will run the app in a non-web target which is why you see the error of the library not being available.

You can run the test successfully by running flutter test --platform chrome.

You will need to employ the use of conditional imports if you want to use the js_interop library in a flutter app with targets other than web.

Does the above information resolve your issue?

Hi @r-durao-pvotal, dart:js_interop and other web libraries are only available when you're targetting the web platform. flutter test by default will run the app in a non-web target which is why you see the error of the library not being available.

You can run the test successfully by running flutter test --platform chrome.

You will need to employ the use of conditional imports if you want to use the js_interop library in a flutter app with targets other than web.

Does the above information resolve your issue?

Indeed, it does resolve it. Thank you!