Polymer Dart Testing with 1.0


I try to test a polymer-component written in dart using the “test” package, following the instructions on https://pub.dartlang.org/packages/test.

In pubspec.yaml, I set my transformers like this:

- web_components:
      - web/foo.html
      - test/my_component_test.html
- reflectable:
      - web/foo.dart
- test/pub_serve:
      - test/**_test{.*,}.dart

my_component_test.html looks like this:

<!doctype html>
    <title>Custom HTML Test</title>
    <link rel="x-dart-test" href="my_component_test.dart">
    <script src="packages/test/dart.js"></script>
  <body><my-component id="abc"></my-component></body>

my_component_test.dart like this:

import "dart:html";
import "package:test/test.dart";
import 'package:polymer/polymer.dart';

import '../web/my_component.dart';

void main() {
  MyComponent componentUnderTest;

  setUpAll(() {
    return initPolymer();

  setUp(() {
    componentUnderTest = document.body.querySelector("#abc");

  test("my-component should be initialized correctly", () {
    Element heading = componentUnderTest.shadowRoot.querySelector('h1');
    expect(heading.text, equals('This is my component'));

If I try to run the tests using pub serve and pub run test:test --pub-serve=8081 -p firefox in two separate terminals, there are two different errors:

[Error from WebComponents on polymer_dart_example|test/my_component_test.html]:
Unable to import `polymer_dart_example/web/my_component.dart` from polymer_dart_example|test/my_component_test.bootstrap.initialize.dart.
[Error from WebComponents on polymer_dart_example|test/my_component_test.html]:
Can't import `polymer_dart_example|web/my_component.dart` from `polymer_dart_example|test/my_component_test.bootstrap.initialize.dart`
Build error:
Transform WebComponents on polymer_dart_example|test/my_component_test.html threw error: Could not format because the source could not be parsed:

line 16, column 1 of <unknown>: Directives must appear before any declarations
import 'package:polymer/src/common/polymer_register.dart' as i13;

while compiling and

  NullError: receiver is undefined
  package:web_components/src/init.dart 31:1           J.$asx
  package:polymer/init.dart 28:22                     <fn>
  package:stack_trace                                 init.<fn>.<fn>
  package:polymer/init.dart 31:3                      dart<._setUpPropertyChanged
  package:path/src/style/windows.dart 95:71           dart<.initPolymer.<fn>
  ===== asynchronous gap ===========================

while testing (caused by initPolymer()).

I suspect there is something wrong with my configuration, but I can’t figure out what the problem is. The component itself is working fine.


test/my_component_test.dart needs to be added to the reflectable transformer.

I’m also pretty sure await initPolymer(); needs to be outside the setUpAll() method, at least there is no reason to wrap it with setUpAll().

void main() async {
  MyComponent componentUnderTest;

  await return initPolymer();


Related issue https://github.com/dart-lang/polymer-dart/issues/649

Answered By – Günter Zöchbauer

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.