Problem with executing unit test

Help Requests
1

Hello
I have problem with executing simple unit test based on StageComponent (from Aurelia tutorials).
Of couse, I’m using aurelia-testing, bootstraper, StageComponent etc.

Whe I testing it without callback:

    test('First try', () => {
        component.create(bootstrap).then(() => {
            expect('3').toEqual('4');
        });
    });

I will always get true (huh?).

With done parameter (as callback):

    test('First try', done => {
        console.log('x');
        component.create(bootstrap).then(() => {
            expect('3').toEqual('4');
            done();
        });
    });

I get “ReferenceError: webpack_require is not defined”

Could somebody tell me what I’m doing wrong?
Thanks in advance.

1 Like
2

Check what is in component. I’ve succesfully created a sample test which fails. I have an custom element elements/range.html and I create it and put it into component which is then tested.

test/unit/elements/firsttry.spec.js:

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

describe('range element', () => {
  let component;

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

  test('First try', done => {
    component = StageComponent
      .withResources('elements/range.html')
      .inView('<range></range>');

    console.log('x');
    component.create(bootstrap).then(() => {
      expect('3').toEqual('4');
      done();
    });
  });
});

then my au test outputs:

$ au test
Local aurelia-cli v2.0.3
Starting '_default'...

 FAIL  test/unit/elements/firsttry.spec.js
  ● Console

    console.log
      x

      at Object.<anonymous> (test/unit/elements/firsttry.spec.js:19:13)

  ● range element › First try

    expect(received).toEqual(expected) // deep equality

    Expected: "4"
    Received: "3"

      19 |     console.log('x');
      20 |     component.create(bootstrap).then(() => {
    > 21 |       expect('3').toEqual('4');
         |                   ^
      22 |       done();
      23 |     });
      24 |   });

      at test/unit/elements/firsttry.spec.js:21:19
3

Hi Tomas.
Thanks for reply.
Do you use webpack in your project? Because it is my main problem: run test with it.

1 Like
4

Yes. In case of webpack I use import {PLATFORM} from 'aurelia-pal'.
A sample test from my project:

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

describe('Stage Viewer Component', () => {
  let component;

  beforeEach(() => {
    component = StageComponent
      .withResources(PLATFORM.moduleName('../../src/components/viewer'))
      .inView('<viewer></viewer>');
  });

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

  it('should create editor and viewer divs', done => {
    component.create(bootstrap).then(() => {
      const view = component.element;
      const divs = view.getElementsByTagName('markdownaurelia');
      expect(divs.length).toBeGreaterThanOrEqual(1);
      done();
    }).catch(e => {
      fail(e);
      done();
    });
  });
});
5

In my case it doesn’t work neither with “aurelia-framework” (info from documentation) nor “aurelia-pal” :frowning:

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

describe('Testing nav-bar', () => {
    let component;
    let navBarBinding;

    beforeEach(() => {
        navBarBinding = {
            state: {
                showNav: false
            },
            nav: null
        };
        component = StageComponent
            .withResources(PLATFORM.moduleName('./app/nav-bar'))
            .inView('<nav-bar if.bind="navBarBinding.state.showNav" nav.bind="navBarBinding.nav"></nav-bar>')
            .boundTo(navBarBinding);
    });

    test('First try', async () => {
        await component.create(bootstrap);
        expect('3').toEqual('4');

    });
});

ReferenceError: __ webpack_require __ is not defined
Hint:
aurelia-loader-webpack.js:185:25

Could you Tomas check if in webpack.config you have included/used aurelia-testing?

EDIT:
I’ve taken your exmple Tomas (with my simple component) and still get webpack_require error :confused:

6

Sorry for late response. I have ‘aurelia-testing’ in webpack config. Check and compare with our configuration, package-lock.json in our open source repository with Aurelia webpack project and some tests (build and test is working as expected) at