How to access elements DOM for testing in Aurelia 2?

vNext
1

I followed the tutorial here https://docs.aurelia.io/developer-guides/overview/testing-components
but the code resulting code leads to errors.

Bildschirmfoto 2024-06-13 um 07.56.29
Bildschirmfoto 2024-06-13 um 07.56.29978×544 55.1 KB

  • tearDown is @deprecated
  • ICustomElementViewModel.textContent does not exists

How to get component.document.querySelector() or any other may to access innerHTML.

2

You need to access appHost like:

const { appHost, component, startPromise, tearDown } = createFixture(
    '<empty></empty>',
    class ViewModel {},
    [Empty]
);

expect(appHost.textContent).toContain('');
3

Thanks @mreiche You can do it like this

const { assertText, tearDown } = createFixture(
    '<empty></empty>',
    class ViewModel {},
    [Empty]
);

assertText('');

tearDown();
  • assertText is a simple way to assert text content of appHost. It has a few overloads to help you assert text of an element inside appHost with a css selector as first argument and text as 2nd
  • If there’s nothing asynchronous in your entire test app (no async lifecycle, no async app tasks) then you don’t need to do await startPromise