# \[SOLVED\] Problem with testing aurelia components using "jest"

**URL:** <https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380>\
**Category:** Help Requests\
**Created:** [November 15, 2017, 8:38am UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380 "2017-11-15T08:38:16Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![shahabganji](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/shahabganji/32/1539_2.png) [@shahabganji](https://discourse.aurelia.io/u/shahabganji)\
**Post date:** [November 15, 2017, 8:38am UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/1 "2017-11-15T08:38:16Z")

</div>

We have run the sample which is on the `aurelia.io` web site for [testing components](http://aurelia.io/docs/testing/components#testing-a-custom-element), we are using **jest** , we had successfully tested a value converter with it,however, in testing custom elements we faced two problems:

1. Cannot call ComponentTester.dispose() before ComponentTester.create()

 ![1](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/0b4242925428d9903970ffea013b6bf531b2ee93.png)

1. Path must be a string. Received undefined.

 ![2](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/559c0d6b1fd837579cdf67517842956f62fadcc0.png)

Is there any idea around the problems? and how can we tackle them?

---

<div class="post-metadata">

**Author:** ![fragsalat](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fragsalat/32/270_2.png) [@fragsalat](https://discourse.aurelia.io/u/fragsalat)\
**Post date:** [November 15, 2017, 9:10am UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/2 "2017-11-15T09:10:51Z")

</div>

At a glance I’ve no plan what this could be. It looks totally fine for my.  
Could you maybe prepare a demo project to reproduce the problem so that I could test it?

---

<div class="post-metadata">

**Author:** ![shahabganji](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/shahabganji/32/1539_2.png) [@shahabganji](https://discourse.aurelia.io/u/shahabganji)\
**Post date:** [November 15, 2017, 9:45am UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/3 "2017-11-15T09:45:31Z")

</div>

@fragsalat

you could find a sample repository [here](https://github.com/shahabganji/jest_test)

---

<div class="post-metadata">

**Author:** ![fragsalat](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fragsalat/32/270_2.png) [@fragsalat](https://discourse.aurelia.io/u/fragsalat)\
**Post date:** [November 15, 2017, 12:47pm UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/4 "2017-11-15T12:47:12Z")

</div>

So there were multiple issues.  
Since I don’t work with neither jest nor typescript I had to google as well^^

- The jest configuration was wrong
- you were missing the package aurelia-pal-nodejs which is the platform abstraction layer for nodejs
- with this package you were missing jsdom as well which emulates the browser DOM functionallity

I created a PR to your repository which should fix your issues  
[https://github.com/shahabganji/jest\_test/pull/1](https://github.com/shahabganji/jest_test/pull/1)

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [November 15, 2017, 2:21pm UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/5 "2017-11-15T14:21:11Z")

</div>

@fragsalat

Hello, thanks for your answer.

I checked your PR but we have some problems yet

the `setup.ts` should change to

```auto
import 'aurelia-polyfills';
import {Options} from 'aurelia-loader-nodejs';
import {initialize} from 'aurelia-pal-nodejs'; // globalize does not exist 
import * as path from 'path';
Options.relativeToDir = path.join(__dirname, 'unit');
initialize();

```

after step one we have another problem `TypeError: jsdom_1.jsdom is not a function` seems the problem comes from `aurelia-pal-nodejs/dist/index.js` but I am sure `"jsdom": "11.3.0"` is installed.

 ![Untitled](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/176d90e2328a9d1000a9cd6046c31958a9b859c7.png)

Do you have any idea ?

I think [Jest](https://facebook.github.io/jest/) is one of the best testing framework, It would be very great if someone explained the correct setting.

thanks

---

<div class="post-metadata">

**Author:** ![shahabganji](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/shahabganji/32/1539_2.png) [@shahabganji](https://discourse.aurelia.io/u/shahabganji)\
**Post date:** [November 15, 2017, 2:51pm UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/6 "2017-11-15T14:51:57Z")

</div>

Thanks @fragsalat for the time and effort, but I’m afraid it doesn’t work properly yet, as @HamedFathi said there are still errors related to jsdom.

we also checked [here](https://www.schempy.com/2017/05/25/aurelia_testing_with_jest/), and I wondered why the name of required packages are not documented in [aurelia.io](http://aurelia.io) 😩

anyway, any idea around the problem?

---

<div class="post-metadata">

**Author:** ![fragsalat](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fragsalat/32/270_2.png) [@fragsalat](https://discourse.aurelia.io/u/fragsalat)\
**Post date:** [November 15, 2017, 5:09pm UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/7 "2017-11-15T17:09:12Z")

</div>

Did you try to run `npm i -D jsdom` explicitly?

For me it worked after installing aurelia-pal-nodejs and jsdom

I run the tests with `npm test`

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [November 15, 2017, 5:54pm UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/8 "2017-11-15T17:54:51Z")

</div>

so strange

 ![111](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/b2cae318faac0ec6dae1761bb67cc23e4d29aebb.png)

but after `npm install aurelia-pal-nodejs -D` explicitly (again) the problem changed !!!

 ![2222](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/bedd1cb4c99ba11df9238e6e8ad033417e9c0dc0.png)

I’m really exhausted of getting involved with this problem. We were involved with this problem all day It’s really ridiculous. 😡

---

<div class="post-metadata">

**Author:** ![shahabganji](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/shahabganji/32/1539_2.png) [@shahabganji](https://discourse.aurelia.io/u/shahabganji)\
**Post date:** [November 15, 2017, 6:16pm UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/9 "2017-11-15T18:16:35Z")

</div>

@fragsalat I removed my `node_module` folder, then I ran `npm update` and `npm i -D jsdom` explicitly, however, I still get jsdom error as follows:

 ![06](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/3c1246fdd98ed718e6cb9c8a28f4a19a44a7418a.png)

do you want me to push to the above-mentioned repository?

and when I use `npm i -D jsdom aurelia-pal-nodejs` I get the same errors as @HamedFathi

---

<div class="post-metadata">

**Author:** ![fragsalat](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fragsalat/32/270_2.png) [@fragsalat](https://discourse.aurelia.io/u/fragsalat)\
**Post date:** [November 15, 2017, 9:42pm UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/10 "2017-11-15T21:42:25Z")

</div>

Yeah you can push it. I’ll check it tomorrow 🙂

---

<div class="post-metadata">

**Author:** ![shahabganji](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/shahabganji/32/1539_2.png) [@shahabganji](https://discourse.aurelia.io/u/shahabganji)\
**Post date:** [November 16, 2017, 5:47am UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/11 "2017-11-16T05:47:32Z")

</div>

I did, thanks 🙂

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [November 16, 2017, 7:11am UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/12 "2017-11-16T07:11:48Z")

</div>

@fragsalat

thanks we checked on two different systems Windows and Mac. We have same problems as pictures show.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![fragsalat](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fragsalat/32/270_2.png) [@fragsalat](https://discourse.aurelia.io/u/fragsalat)\
**Post date:** [November 16, 2017, 4:09pm UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/13 "2017-11-16T16:09:47Z")

</div>

I fixed the tests again 🙂

You destroyed the setup.ts file

[https://github.com/shahabganji/jest\_test/pull/2](https://github.com/shahabganji/jest_test/pull/2)

---

<div class="post-metadata">

**Author:** ![shahabganji](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/shahabganji/32/1539_2.png) [@shahabganji](https://discourse.aurelia.io/u/shahabganji)\
**Post date:** [November 16, 2017, 6:56pm UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/14 "2017-11-16T18:56:20Z")

</div>

@fragsalat

> You destroyed the setup.ts file

cause it didn’t find `globalize` and we only had `initialize` 😩

It sounds that `yarn` was using the wrong address to load packages, I have no idea why !!! and when I used `npm i -D aurelia-pal-nodejs` i still had the wrong package and again no idea. anyway it works now and thanks for your time and effort. well done 😄

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [November 16, 2017, 7:04pm UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/15 "2017-11-16T19:04:55Z")

</div>

@fragsalat

I’m **sure** that VS Code informed me that there was no `globalize()` and that there was only and only `initialize()`. I had an error so I changed your config to `initialize()`

This is the reason why the `setup.ts` file was **destroyed**

 ![photo_2017-11-16_21-41-11](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/579bee40b8630d9364b0791cdaff8f8c47986b6a.jpg)

but now

 ![1](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/2788c9520aa0049916c0c94e4e5a65bf91c992fd.png)

 ![11](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/879f4cd2945c1a46fb0f1e49220b6147e27e1a8f.png)

Finally, we guess we found the problem both of us use `Yarn` for installing the packages but it seems that the `Yarn` will take the wrong package !!!

this is  
[https://registry.yarnpkg.com/aurelia-pal-nodejs/-/aurelia-pal-nodejs-1.0.0.tgz](https://registry.yarnpkg.com/aurelia-pal-nodejs/-/aurelia-pal-nodejs-1.0.0.tgz)

This package seems to be outdated. However, we deleted the `node_modules` and retrieved all the packages by `npm install` and everything works 😃

The strange thing here is that the explicit `npm install -D aurelia-pal-nodejs` command has no effect.

I do not know what happened, but I’m happy to have a happy ending.

We both thank you very much. Thank you for taking the time and checking our problem.

---

<div class="post-metadata">

**Author:** ![shahabganji](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/shahabganji/32/1539_2.png) [@shahabganji](https://discourse.aurelia.io/u/shahabganji)\
**Post date:** [November 16, 2017, 7:38pm UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/16 "2017-11-16T19:38:13Z")

</div>

Dear @fragsalat and @HamedFathi

I leave [this](https://github.com/shahabganji/jest_test) repository to be available for those in search of unit testing aurelia components with [jest](https://facebook.github.io/jest/).

However, a skeleton for writing aurelia plugins with unit tests is available [here](https://github.com/vegarringdal/skeleton-plugin-typescript)

---

<div class="post-metadata">

**Author:** ![shahabganji](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/shahabganji/32/1539_2.png) [@shahabganji](https://discourse.aurelia.io/u/shahabganji)\
**Post date:** [November 16, 2017, 8:48pm UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/18 "2017-11-16T20:48:01Z")

</div>

My problem with yarn solved, I updated yarn to version `1.3.2` and ran `yarn cache clean` and then `yarn install`, then `yarn test`, and everything worked just fine.

Many thanks to @fragsalat

---

<div class="post-metadata">

**Author:** ![fragsalat](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fragsalat/32/270_2.png) [@fragsalat](https://discourse.aurelia.io/u/fragsalat)\
**Post date:** [November 17, 2017, 11:32am UTC](https://discourse.aurelia.io/t/solved-problem-with-testing-aurelia-components-using-jest/380/19 "2017-11-17T11:32:11Z")

</div>

I’m happy that it works now 🙂  
@HamedFathi You can see in the first screenshot that the comment says

> Initializes the PAL with the Browser-targeted implementation

This could told you that it might be the wrong package 🙂  
I’m using IntelliJ and it also sometimes resolves the dependencies wrong ☹

Still much room for improvement there 🙂