Dart/Flutter Web 單元測試錯誤：錯誤：未找到：'dart:html'

Question

我正在開發 Flutter web 應用程序，但在運行測試時遇到問題。

Flutter 1.7.8+hotfix.4 • channel stable • git@github.com:flutter/flutter.git
Framework • revision 20e59316b8 (9 weeks ago) • 2019-07-18 20:04:33 -0700
Engine • revision fee001c93f
Tools • Dart 2.4.0

這是 pubspec.yaml：

name: web_flutter
description: An app built using Flutter for web

environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  sdk: '>=2.3.0-dev.0.1 <3.0.0'

dependencies:
  flutter_web: any
  flutter_web_ui: any
  provider: any
  rxdart: ^0.22.0
  http: ^0.12.0+2
  json_annotation: ^2.4.0
  intl: 0.15.8


dev_dependencies:
  build_runner: ^1.4.0
  build_web_compilers: ^2.0.0
  pedantic: ^1.0.0
  json_serializable: ^3.0.0
  test: any

flutter:
  uses-material-design: true

dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui
  provider:
    git:
      url: https://github.com/kevmoo/provider
      ref: flutter_web

當我在 IDE 的終端（VS 代碼）或終端應用程序中運行pub run test時，我編寫了幾個測試通過。

我遇到問題的測試需要從項目中導入一些 package。 有了這個測試，我得到了錯誤，其他兩個測試沒有運行。 我還沒有找到任何指向解決方案的東西。

這是錯誤消息：

pub run test                                                                                         MyMac@MyMac
00:06 +0 -1: loading test/service_test.dart [E]                                                                                                                          
  Failed to load "test/service_test.dart":
  Unable to spawn isolate: file:///Users/MyMac/.pub-cache/git/flutter_web-c04fb502b842859de07e36954a9390465a5426c0/packages/flutter_web_ui/lib/ui.dart:12:8: Error: Not found: 'dart:html'
  import 'dart:html' as html;
         ^
  file:///Users/MyMac/.pub-cache/git/flutter_web-c04fb502b842859de07e36954a9390465a5426c0/packages/flutter_web_ui/lib/src/engine.dart:11:8: Error: Not found: 'dart:html'
  import 'dart:html' as html;
         ^
  file:///Users/MyMac/.pub-cache/git/flutter_web-c04fb502b842859de07e36954a9390465a5426c0/packages/flutter_web/lib/src/services/asset_bundle.dart:7:8: Error: Not found: 'dart:html'
  import 'dart:html' show HttpRequest;
         ^
  file:///Users/MyMac/.pub-cache/git/flutter_web-c04fb502b842859de07e36954a9390465a5426c0/packages/flutter_web_ui/lib/src/engine.dart:12:8: Error: Not found: 'dart:js'
  import 'dart:js' as js;
         ^
  file:///Users/MyMac/.pub-cache/git/flutter_web-c04fb502b842859de07e36954a9390465a5426c0/packages/flutter_web_ui/lib/src/engine.dart:13:8: Error: Not found: 'dart:js_util'
  import 'dart:js_util' as js_util;
         ^
  file:///Users/MyMac/.pub-cache/git/flutter_web-c04fb502b842859de07e36954a9390465a5426c0/packages/flutter_web_ui/lib/src/ui/compositing.dart:20:9: Error: Type 'html.Element' not found.
    final html.Element webOnlyRootElement;
          ^^^^^^^^^^^^
  file:///Users/MyMac/.pub-cache/git/flutter_web-c04fb502b842859de07e36954a9390465a5426c0/packages/flutter_web_ui/lib/src/engine.dart:177:37: Error: Type 'html.NodeTreeSanitizer' not found.
  class _NullTreeSanitizer implements html.NodeTreeSanitizer {
                                      ^^^^^^^^^^^^^^^^^^^^^^
  file:///Users/MyMac/.pub-cache/git/flutter_web-c04fb502b842859de07e36954a9390465a5426c0/packages/flutter_web_ui/lib/src/engine.dart:179:21: Error: Type 'html.Node' not found.
    void sanitizeTree(html.Node node) {}
                      ^^^^^^^^^
  file:///Users/MyMac/.pub-cache/git/flutter_web-c04fb502b842859de07e36954a9390465a5426c0/packages/flutter_web_ui/lib/src/engine/bitmap_canvas.dart:26:9: Error: Type 'html.Element' not found.
    final html.Element rootElement = html.Element.tag('flt-canvas');
          ^^^^^^^^^^^^
  file:///Users/MyMac/.pub-cache/git/flutter_web-c04fb502b842859de07e36954a9390465a5426c0/packages/flutter_web_ui/lib/src/engine/bitmap_canvas.dart:28:3: Error: Type 'html.CanvasElement' not found.
    html.CanvasElement _canvas;
    ^^^^^^^^^^^^^^^^^^
00:06 +0 -1: Some tests failed.

如果我注釋掉這個新測試，錯誤仍然存在。 如果我注釋掉測試和相關的導入，剩下的兩個測試運行並通過。

這是測試文件（我把有問題的代碼注釋掉了，這樣你更容易看到——我希望如此）。

import 'package:test/test.dart';
import 'package:http/http.dart';
import 'package:http/testing.dart';
import 'dart:convert';
import 'package:web_flutter/services/service.dart';
// These are the package imports that cause errors:
import 'package:web_flutter/model/model.dart';
import 'package:web_flutter/data/tenant_view_model.dart';

void main(){

  test("getSubmission returns ResponseData{}", () async {
    // Arrange: setup the test
    final _service = Service();

    _service.httpClient = MockClient((request) async {
      final responseData = {
        "id": "some_id",
        "state": "processed",
        "test": true,
        "editable": false,
        "expires_at": "2019-09-19T03:40:22Z",
        "processed_at": "2019-09-12T03:40:22Z",
        "batch_id": "",
        "download_url": "downloadURl.com",
        "permanent_download_url": "permanentdownloadURL.com"
      };
      return Response(json.encode(responseData),200);
    });

    // Act
    final response = await _service.getSubmission("submissionID");

    // Assert
    expect(response.download_url, "downloadURL.com");
  });
  test("generateForm returns SubmissionResponse{}", () async {
    // Arrange: setup the test
    final _service = Service();

    _service.httpClient = MockClient((request) async {
      final submissionResponse = {
        "status": "success",
        "submission": {
          "id": "some_id",
          "state": "pending",
          "test": false,
          "editable": false,
          "expired": false,
          "expires_at": null,
          "metadata": {
            "foo": 123,
            "bar": "baz"
          },
          "processed_at": null,
          "batch_id": null,
          "data_requests": [],
          "download_url": null,
          "permanent_download_url": null
        }
      };
      return Response(json.encode(submissionResponse),200);
    });

    // Act
    final response = await _service.generateForm(42, "templateID");

    // Assert
    expect(response.submission.id, "some_id");
  });

  test('Tenant View Model generateForm returns tenantVM.submission.submission.id', () async {
    // Arrange
    final _service = Service();
    Tenant tenant;
    tenant.id = 42;

    _service.httpClient = MockClient((request) async {
      final submissionResponse = {
        "status": "success",
        "submission": {
          "id": "some_id",
          "state": "pending",
          "test": false,
          "editable": false,
          "expired": false,
          "expires_at": null,
          "metadata": {
            "foo": 123,
            "bar": "baz"
          },
          "processed_at": null,
          "batch_id": null,
          "data_requests": [],
          "download_url": null,
          "permanent_download_url": null
        }
      };
      return Response(json.encode(submissionResponse),200);
    });
    TenantViewModel tenantVM = TenantViewModel(tenant, _service);

    // Act
    await tenantVM.generateForm("templateID");

    // Assert
    expect(tenantVM.submission.submission.id, "some_id");
  });
}

這是 class，它具有我要測試的方法 ( generateForm() )。

import 'package:flutter_web/cupertino.dart';
import 'package:web_flutter/model/model.dart';
import 'package:web_flutter/services/service.dart';

class TenantViewModel with ChangeNotifier {
  Tenant _tenant;
  Property _property;
  Service _service;
  SubmissionResponse _submission;
  ResponseData _responseData;

  TenantViewModel(this._tenant, this._service);

  bool get isNew => _tenant.id == null;

  set tenant(Tenant tenant) {
    if (_tenant != tenant) {
      _tenant = tenant;
      notifyListeners();
    }
  }

  Tenant get tenant => _tenant;

  set property(Property property) {
    _tenant.propertyId = property.id;
    notifyListeners();
  }

  Property get property => _property;

  set submission(SubmissionResponse submission) {
    if (_submission != submission) {
      _submission = submission;
      notifyListeners();
    }
  }

  SubmissionResponse get submission => _submission;

  set responseData(ResponseData responseData) {
    if (_responseData != responseData) {
      _responseData = responseData;
      notifyListeners();
    }
  }

  ResponseData get responseData => _responseData;

  Future generateForm(String templateID) async {
    SubmissionResponse submission;

    submission = await _service.generateForm(_tenant.id, templateID);
    this.submission = submission;

    notifyListeners();
  }

  Future getSubmission(String submissionID) async {
    ResponseData responseData;

    responseData = await _service.getSubmission(submissionID);
    this.responseData = responseData;

    notifyListeners();
  }

  Future save() async {
    Tenant updatedTenant;
    if (tenant.isNew) {
      updatedTenant = await _service.createTenant(_tenant);
      this.tenant = updatedTenant;
    } else {
      updatedTenant = await _service.updateTenant(tenant);
      this.tenant = updatedTenant;
    }
    notifyListeners();
  }

  Future refresh() async {
    if (isNew) {
      return;
    }
    var updatedTenant = await _service.getTenant(_tenant.id);
    if (_tenant.propertyId != null) {
      _property = await _service.getProperty(_tenant.propertyId);
    }
    _tenant = updatedTenant;
    notifyListeners();
  }
}

我試過： import 'package:flutter_test/flutter_test.dart'; 在測試文件中並將其添加到 pubspec.yaml：

  flutter_test:
    sdk: flutter

這些會導致各種錯誤，因為我使用的是 Flutter Web，而不是 Flutter。有人能看出我哪里出錯了嗎？

我知道我正在進行的測試可能是錯誤的，但我什至不能讓它運行並失敗。

Answer 1

我在開發移動應用程序時遇到了類似的問題，但結果是我不小心導入了dart.html包。 我剛剛刪除它，我能夠運行該程序。

Answer 2

由於您正在為使用 dart:html 包的 web 運行顫振測試，因此您必須針對正確的平台。

flutter test --platform chrome

Answer 3

當您嘗試導入 @required 之類的內容時，可能會發生這種情況。 然后flutter會不小心把import dart.html放到代碼上面。 只需從代碼中刪除它，然后您將解決您的問題。

Answer 4

問題的出現是因為，正如我的技術負責人所指出的，“單元測試無法訪問dart:html 。除非你在瀏覽器中運行它們。”

來自 pub.dev/packages/test：

“默認情況下，測試在 Dart VM [虛擬機] 中運行，但您也可以通過 pub run test pub run test -p chrome path/to/test.dart在瀏覽器中運行它們。test 將負責啟動瀏覽器並加載測試，所有結果都會像VM測試一樣在命令行上報告。事實上，你甚至可以用一個命令在兩個平台上運行測試： pub run test -p "chrome,vm" path/to/test.dart "

為了解決我的特定問題，我使用pub run test test/print_reports_card_test.dart -p chrome了測試。

Answer 5

更改import 'dart:html'; import 'package:http/http.dart' as http;

然后將pubspec.yaml文件依賴項更改為

dependencies:
flutter:
sdk: flutter
http:

然后點擊pub get

Answer 6

如果您同時對 Web 和移動設備進行測試，另一種解決方案是在測試文件的頂部添加@TestOn('browser') 。
這是完整的文檔

Answer 7

我有完全相同的問題。 我的問題是我導入了package:url_launcher_web/url_launcher_web.dart顯然你不應該這樣做。 無論如何，這是一個未使用的導入，所以我刪除了它，然后我的手機工作正常。

要修復它，請將其刪除，問題將得到解決。

為什么會發生此錯誤：當不需要導入時，分析器會生成此診斷信息，因為導入庫中沒有引用任何導入的名稱。

例子：

以下代碼會產生此診斷信息，因為在

dart:async

在庫中引用：

import 'dart:async';

void main() {}

常見修復：

如果不需要導入，則將其刪除。

如果打算使用某些導入的名稱，則添加缺少的代碼。

Answer 8

您在哪個文件中添加了 import 'dart:html' 只需刪除它，然后再次執行代碼。 我認為問題會得到解決。 在此之后，我解決了我的問題。

Answer 9

刪除導入 'dart:html'；

從對我有用的文件中也可以將平台更改為 chrome works

Answer 10

當語言模式不合適時，有時會發生此錯誤。 確保“選擇語言模式”（圖中黃色圓圈）處於正確模式。 對於這種情況，我認為應該是 HTML

Answer 11

我有同樣的問題，我刪除了這條線並且可以工作！ 導入“飛鏢：html”

Answer 12

您需要做一些條件導入並將您在“dart:html”中訪問的組件實現到您自己的文件中

這是我使用dart:html的window.open的例子

window_service.dart

Window window = Window();

class Window {
  void open(String url, String name, [String? options]) {}
}

通過以上你可以做到：

import "window_service.dart" if (kIsWeb) "dart:html" as html;
...
html.window.open(url, name, options);

通過在虛擬文件 (window_service.dart) 中使用相似/相同的結構實現它們，對您進行的每個dart:html調用執行相同的操作。 然后您現在可以無誤地運行您的測試。