# How to access component's view model in unit tests

**URL:** <https://discourse.aurelia.io/t/how-to-access-components-view-model-in-unit-tests/1804>\
**Category:** Help Requests\
**Created:** [October 24, 2018, 6:00pm UTC](https://discourse.aurelia.io/t/how-to-access-components-view-model-in-unit-tests/1804 "2018-10-24T18:00:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mkhan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mkhan/32/1124_2.png) [@mkhan](https://discourse.aurelia.io/u/mkhan)\
**Post date:** [October 24, 2018, 6:00pm UTC](https://discourse.aurelia.io/t/how-to-access-components-view-model-in-unit-tests/1804/1 "2018-10-24T18:00:17Z")

</div>

I am unit testing one of my components in an Aurelia project. I’d like to access my component’s viewModel in my unit test but haven’t had any luck so far.

I followed the example available at [https://aurelia.io/docs/testing/components#manually-handling-lifecycle](https://aurelia.io/docs/testing/components#manually-handling-lifecycle) but I keep getting `component.viewModel` is `undefined` .

```
it('can manually handle lifecycle', () => {

return component.manuallyHandleLifecycle().create(bootstrap)
    .then(() => component.bind())
    .then(() => component.attached())
    .then(() => component.unbind() )
    .then(() => {
        expect(component.viewModel.name).toBe(null);
        return Promise.resolve(true);
});

```

});

Here is the error I get:

```
1) my aurelia tests
   can manually handle lifecycle:
 TypeError: Cannot read property 'name' of undefined

```

[Here](https://github.com/aurelia/testing/blob/0635bade27d270c93cd7e4fe3d8ee1e8051569b0/dist/native-modules/component-tester.js#L54) is the the line that defines the `viewModel` on the `component` object but only if `aurelia.root.controllers.length` is set. I am not sure how to set controllers in my aurelia code or if I need to do so at all.

I guess my question is: How do I get access to a component’s viewModel in my unit tests?

---

<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:** [October 25, 2018, 9:30am UTC](https://discourse.aurelia.io/t/how-to-access-components-view-model-in-unit-tests/1804/2 "2018-10-25T09:30:59Z")

</div>

In my experience, the view-model of the component depends on how you are staging your component and view.

```auto
StageComponent.withResources("path/to/MyComp").inView("<my-comp></my-comp>")

```

Make sure you are doing that correctly, or you component is at the specified resource path. If you are using Webpack, you need to setup the testing environment correctly. If you are using Jasmine+Karma+Webpack, you may check this out: [Aurelia-Testing with Jasmine/Karma Fails](https://discourse.aurelia.io/t/aurelia-testing-with-jasmine-karma-fails/1629/10?u=sayan751) for more info on the setup. Basically, if you are using Webpack, you need to make sure the your component under test included in the bundle (easiest would be to put the component root path to module, in Webpack config).

Once the setup is done correctly, and the specified resource is available under the said path, the `component.viewModel` should be available after the `create(bootstrap)`, irrespective of whether it is `manuallyHandleLifecycle` or not.

Hope this helps.

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [October 28, 2018, 7:47pm UTC](https://discourse.aurelia.io/t/how-to-access-components-view-model-in-unit-tests/1804/3 "2018-10-28T19:47:50Z")

</div>

Also, for those interested, here is a minimalistic setup with karma+mocha+typescript+webpack (with sourcemaps and VS Code debugging) and a basic test verifying the rendered html: [https://github.com/fkleuver/aurelia-karma-webpack-testing](https://github.com/fkleuver/aurelia-karma-webpack-testing)

---

<div class="post-metadata">

**Author:** ![mkhan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mkhan/32/1124_2.png) [@mkhan](https://discourse.aurelia.io/u/mkhan)\
**Post date:** [October 29, 2018, 4:11pm UTC](https://discourse.aurelia.io/t/how-to-access-components-view-model-in-unit-tests/1804/4 "2018-10-29T16:11:56Z")

</div>

Thanks for your reply. For now, I went with the solution at [https://stackoverflow.com/questions/52975104/aurelia-unit-testing-access-components-viewmodel](https://stackoverflow.com/questions/52975104/aurelia-unit-testing-access-components-viewmodel)