Testing a component output component.element

Hello everyone,
I’m trying to test a simple component output:

import {StageComponent} from 'aurelia-testing';
import {bootstrap} from 'aurelia-bootstrapper';
import {PLATFORM} from 'aurelia-pal';

describe('Account Details', () => {
  let component;

  beforeEach(() => {
    component = StageComponent

  it('should render first name', done => {
    component.create(bootstrap).then(() => {
      expect(component.element.textContent).toBe('No details yet.');
    }).catch(e => { console.log(e.toString()) });

  afterEach(() => {
  <div class="account-details">${message}</div>
import { inject, customElement, bindable, useView } from 'aurelia-framework';
import {PLATFORM} from 'aurelia-pal';

export class AccountDetails {
  message = "No details yet.";

  constructor(element) {
    this.element = element;

How can I test the output of the component?
“No details yet.”
when try component element, I get :
_ HTMLUnknownElement {
[Symbol(SameObject caches)]: [Object: null prototype] {
attributes: NamedNodeMap {},
style: CSSStyleDeclaration {
_values: {},
_importants: {},
_length: 0,
onChange: [Function (anonymous)]
dataset: DOMStringMap {},
classList: DOMTokenList {},
children: HTMLCollection {}

If I try document.querySelector("div.account-details"); I’ve got NULL
On component.element.innerText => undefined

I think that the@useView might be causing the problem.

The convention should automatically associate the markup with the class. That is, it should work even without the @useView.

I’ll try ity out without the decorator.

Just a general and dummy question, but how can I (with or without @useView) ensure that my component has a h4 title, containing some text and/or simulate a click on a button and inspect the result?

That’s where the conventional loader of au1 comes to play. As long as you have the same name for the view model and the html files (for example: custom-element.[tj]s and custom-element.html), it can load associate the html with the view model class.

1 Like