# Testing a component output component.element

**URL:** <https://discourse.aurelia.io/t/testing-a-component-output-component-element/5375>\
**Category:** Help Requests\
**Created:** [March 11, 2024, 3:53pm UTC](https://discourse.aurelia.io/t/testing-a-component-output-component-element/5375 "2024-03-11T15:53:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![vladyn](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/vladyn/32/2473_2.png) [@vladyn](https://discourse.aurelia.io/u/vladyn)\
**Post date:** [March 11, 2024, 3:53pm UTC](https://discourse.aurelia.io/t/testing-a-component-output-component-element/5375/1 "2024-03-11T15:53:12Z")

</div>

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

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

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

  beforeEach(() => {
    component = StageComponent
      .withResources(PLATFORM.moduleName('account-details'))
      .inView('<account-details"></account-details>');
  });

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

  afterEach(() => {
    component.dispose();
  });
});

```

```auto
<template>
  <div class="account-details">${message}</div>
</template>

```

```auto
import { inject, customElement, bindable, useView } from 'aurelia-framework';
import {PLATFORM} from 'aurelia-pal';

@useView(PLATFORM.moduleName('account-details.html'))
@customElement('account-details')
@inject(Element)
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**

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [March 13, 2024, 7:38pm UTC](https://discourse.aurelia.io/t/testing-a-component-output-component-element/5375/2 "2024-03-13T19:38:53Z")

</div>

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

> [@vladyn](#):
>
> `@useView(PLATFORM.moduleName('account-details.html'))`

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

---

<div class="post-metadata">

**Author:** ![vladyn](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/vladyn/32/2473_2.png) [@vladyn](https://discourse.aurelia.io/u/vladyn)\
**Post date:** [March 14, 2024, 8:53am UTC](https://discourse.aurelia.io/t/testing-a-component-output-component-element/5375/3 "2024-03-14T08:53:22Z")

</div>

I’ll try ity out without the decorator.

---

<div class="post-metadata">

**Author:** ![vladyn](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/vladyn/32/2473_2.png) [@vladyn](https://discourse.aurelia.io/u/vladyn)\
**Post date:** [March 14, 2024, 10:45am UTC](https://discourse.aurelia.io/t/testing-a-component-output-component-element/5375/4 "2024-03-14T10:45:53Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [March 14, 2024, 5:25pm UTC](https://discourse.aurelia.io/t/testing-a-component-output-component-element/5375/5 "2024-03-14T17:25:41Z")

</div>

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.