# Create test for component ( router Mock)

**URL:** <https://discourse.aurelia.io/t/create-test-for-component-router-mock/2833>\
**Category:** Help Requests\
**Created:** [August 12, 2019, 12:02pm UTC](https://discourse.aurelia.io/t/create-test-for-component-router-mock/2833 "2019-08-12T12:02:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![gregson0307](https://avatars.discourse-cdn.com/v4/letter/g/839c29/32.png) [@gregson0307](https://discourse.aurelia.io/u/gregson0307)\
**Post date:** [August 12, 2019, 12:02pm UTC](https://discourse.aurelia.io/t/create-test-for-component-router-mock/2833/1 "2019-08-12T12:02:45Z")

</div>

Hi!  
I’m trying to create a test for my component. My goal is to create mock of the router so I can check if it navigates to right destianation.

```
import {inject, bindable, customElement} from 'aurelia-framework';
import {Router, activationStrategy} from 'aurelia-router';

@customElement('navbar')
export class NavigationBarMenu {

@bindable changedValue;
private router;

static inject = [Router];
constructor(router){
this.router = router;
}

currentRoute() {
return this.router.currentInstruction == null ? '#' : this.router.currentInstruction.config.name;
}

DropdownChanged(changedVal) {
this.router.navigate(changedVal);
}

newArchiveJob() {
this.router.navigate('newArchiveJob');
}

newRestoreJob() {
this.router.navigate('restore-step1');
}

 newMoveJob() {
  this.router.navigate('newMoveJob');
  }

}

```

Thats my View-Model. its simple navigation.  
Can you tell me if there is a way that I can create some simple router in jest test file?

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [August 13, 2019, 2:10am UTC](https://discourse.aurelia.io/t/create-test-for-component-router-mock/2833/2 "2019-08-13T02:10:53Z")

</div>

Aurelia element is just plain JS class, one thing you can do is to test it as a plain JS class without using StageComponent helper.

```auto
import {NavigationBarMenu} from '../src/navigation-bar-menu';

describe('NavigationBarMenu', function() {
  it('...', function() {
    const routerMock = {
      currentInstuction: ...
      navigate: (...) => {...} // write your assertions here.
    };

    // when use the class outside of aurelia context,
    // all decorators `inject` `customElement` are ignored.
    // you just feed the constructor with mocks.
    const menu = new NavigationBarMenu(routerMock);

    menu.newArchiveJob();
  });
});

```

If you use StageComponent to test it in Aurelia context, there should be some API to modify DI container (to replace Router injection with a mock up version), but I don’t know the API. cc @bigopon

---

<div class="post-metadata">

**Author:** ![gregson0307](https://avatars.discourse-cdn.com/v4/letter/g/839c29/32.png) [@gregson0307](https://discourse.aurelia.io/u/gregson0307)\
**Post date:** [August 13, 2019, 9:36am UTC](https://discourse.aurelia.io/t/create-test-for-component-router-mock/2833/3 "2019-08-13T09:36:52Z")

</div>

Thank you for your help. Based on your response I came up with this:

> ```
> it('Navigate call on New Job', done => {
> component.create(bootstrap).then(() => {
> const routerMock = {
> currentInstuction: '',
> navigate: jest.fn((val) => {})
> };
>   
> const menu = new NavigationBarMenu(routerMock);
> menu.newArchiveJob();
> expect(routerMock.navigate).toBeCalled();
> expect(routerMock.navigate).toBeCalledWith('newArchiveJob');
> routerMock.navigate.mockRestore(); 
> done();
> });
> 
> ```

---

<div class="post-metadata">

**Author:** ![mcorven](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@mcorven](https://discourse.aurelia.io/u/mcorven)\
**Post date:** [August 14, 2019, 10:50am UTC](https://discourse.aurelia.io/t/create-test-for-component-router-mock/2833/4 "2019-08-14T10:50:39Z")

</div>

> [@huochunpeng](#):
>
> If you use StageComponent to test it in Aurelia context, there should be some API to modify DI container (to replace Router injection with a mock up version), but I don’t know the API.

Very curious what @bigopon and others have to share. In the past when using StageComponent and needing to modify behavior of an injected dependency, or replace the injected dependency entirely, I’ve used two rather long winded approaches that I would love to see a more elegant solution shared for:

1. Make the main configure() function dynamic, so that it can be consumed by the stage component and when doing so alternate implementations are setup in Container (also, setRoot() is not called).
2. Leverage beforeBind() to replace or alter dependencies before the remainder of the lifecycle kicks off

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [August 17, 2019, 7:43am UTC](https://discourse.aurelia.io/t/create-test-for-component-router-mock/2833/5 "2019-08-17T07:43:56Z")

</div>

Here is an example how i bootstrap differently for my tests:

> <https://github.com/aurelia/web-components/blob/1c1e1dc0167dcd2333f22d5df763e71c15a9fff7/test/utilities-bootstrap.ts#L26>

And how it looks like in a test without `StageComponent`

> <https://github.com/aurelia/web-components/blob/1c1e1dc0167dcd2333f22d5df763e71c15a9fff7/test/ce.integration.spec.ts#L8>

You can do the same thing. The idea is to construct an Aurelia instance, give it the root container if desired, and bootstrap the test app with it, on a host you choose. So for what you want to do, you can do:

```auto
const rootContainer = new Container();
const mockRouter = {
  navigate() { /* say hello */ }
}
const appHost = document.createElement('app');
document.body.appendChild(appHost);
rootContainer.registerInstance(Router, mockRouter);

aurelia.use.standardConfiguration();
await aurelia.start();
await aurelia.setRoot('app', appHost);

```