[ComponentTester] ref + innerhtml not working

[michaelw85]

I'm submitting a bug report ref and innerhtml not working when using the component tester.

• Steps to reproduce 1) checkout repo: https://github.com/michaelw85/repo-aurelia-test-issue 2) npm install 3) au jest

au jest will result in an error for the ref issue. the innerhtml issue is visible in the jest snapshot.

To verify the icons are actually functioning in a normal app use au run to open the dev-app.

• Library Version: aurelia-testing: 1.0.0

Please tell us about your environment:

• Operating System: Windows 10

• Node Version: v10.15.0

• NPM Version: 6.9.0

• JSPM OR Webpack AND Version Plugin setup created with CLI, default TS configuration

• Language: TS

Current behavior: When using a ref binding it is undefined in a unit test when using the component tester. TypeError: Cannot read property 'setAttribute' of undefined (setAttribute is performed on the elements being referenced)

innerhtml is not rendered, here's a jest snapshot:

<my-icon-inner
  au-target-id="2"
  class="au-target"
  name="angle-up"
>

  <!-- This SVG should have inner html with a use element -->
  <svg
    au-target-id="1"
    class="au-target"
    innerhtml.bind="use"
  />

</my-icon-inner>

Expected/desired behavior: ref should work when using the component tester. innerhtml binding should render when using component tester.

[bigopon]

cli-bundler requirejs web typescript karma vscode scaffold-minimum

With test:

import { bootstrap } from 'aurelia-bootstrapper';
import { ComponentTester, StageComponent, waitForDocumentElement } from 'aurelia-testing';

describe('Icon', () => {
    let component: ComponentTester;

    describe('component', () => {
        beforeEach(() => {
            component = StageComponent.withResources('my-icon').inView('<my-icon name="angle-up"></my-icon>');
        });

        it('should render svg icon with href', async () => {
            await component.create(bootstrap);

            const myIcon = await waitForDocumentElement('my-icon')
            expect(myIcon.innerHTML.trim()).toContain('href="src/assets/stack.svg#angle-up"');
        });

        afterEach(() => {
            try {
                component.dispose()
            } catch {
                console.log('dispose error')
            }
        });
    });
});

It works fine. I think there's something wrong with Jest.

[bigopon]

@michaelw85 The above is for your my-icon

[michaelw85]

@bigopon 😲 thx for the reply I did not consider Jest to cause the issue... 🤔 I wonder what it could be.

[bigopon]

@michaelw85 maybe Jest is not the issue, but the combination of Jest and a few other stuff? In anyway, I think for normal looking templates, it will & should work just fine

[michaelw85]

I might investigate a bit more at a later point in time. First thing that pops in my mind is if it might be related to testEnvironment: 'node',.