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

[shahabganji]

We have run the sample which is on the aurelia.io web site for testing components, 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()

2. Path must be a string. Received undefined.

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

[fragsalat]

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?

[shahabganji]

@fragsalat

you could find a sample repository here

[fragsalat]

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

[HamedFathi]

@fragsalat

Hello, thanks for your answer.

I checked your PR but we have some problems yet

the setup.ts should change to

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.

Do you have any idea ?

I think Jest is one of the best testing framework, It would be very great if someone explained the correct setting.

thanks

[shahabganji]

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, and I wondered why the name of required packages are not documented in aurelia.io

anyway, any idea around the problem?

[fragsalat]

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

[HamedFathi]

so strange

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

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

[shahabganji]

@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:

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

[fragsalat]

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

[shahabganji]

I did, thanks

[HamedFathi]

@fragsalat

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

Thanks in advance.

[fragsalat]

I fixed the tests again

You destroyed the setup.ts file

https://github.com/shahabganji/jest_test/pull/2

[shahabganji]

@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

[HamedFathi]

@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

but now

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

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.

[shahabganji]

Dear @fragsalat and @HamedFathi

I leave this repository to be available for those in search of unit testing aurelia components with jest.

However, a skeleton for writing aurelia plugins with unit tests is available here

[shahabganji]

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

[fragsalat]

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