Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP feat(test): switch from aurelia-pal-nodejs to aurelia-pal-browser for jest setup #1019

Closed
wants to merge 1 commit into from

Conversation

@3cp
Copy link
Member

3cp commented Jan 16, 2019

jest by default does simulate browser environment. It's unnecessary to use pal-nodejs (which brings in jsdom but doesn't pollute global vars). Using pal-browser with default jest simulation has extra benefit: be more compatible with 3rd party libs which expects global vars.

cloese #1018

@3cp 3cp changed the title feat: switch from aurelia-pal-nodejs to aurelia-pal-browser for jest setup feat(test): switch from aurelia-pal-nodejs to aurelia-pal-browser for jest setup Jan 16, 2019
@3cp

This comment has been minimized.

Copy link
Member Author

3cp commented Jan 16, 2019

@shahabganji let's know whether it works for you. Thx.

@EisenbergEffect

This comment has been minimized.

Copy link
Member

EisenbergEffect commented Jan 23, 2019

@huochunpeng What is the easiest way for @shahabganji to test this out and give us feedback on whether it will work better than the current setup?

@3cp

This comment has been minimized.

Copy link
Member Author

3cp commented Jan 23, 2019

@shahabganji was about to test it out, but seems didn't get time on it.
@EisenbergEffect anyone with a non-trivial webpack app could try this out. I only tried on tiny app.

@shahabganji

This comment has been minimized.

Copy link
Contributor

shahabganji commented Jan 23, 2019

@EisenbergEffect , @huochunpeng Sorry I have not seen this, I'll check it and will let you know within a couple of hours 🙏

@EisenbergEffect

This comment has been minimized.

Copy link
Member

EisenbergEffect commented Jan 23, 2019

No need to apologize @shahabganji We appreciate you jumping in whenever you can.

@3cp

This comment has been minimized.

Copy link
Member Author

3cp commented Jan 23, 2019

@shahabganji this is the same fix as the one posted on your issue.

@shahabganji

This comment has been minimized.

Copy link
Contributor

shahabganji commented Jan 23, 2019

@huochunpeng

@shahabganji this is the same fix as the one posted on your issue.

I did not use them, since both of the approaches I've mentioned there also worked, however, I'll check your changes to make sure it works properly too 👍

@Vheissu

This comment has been minimized.

Copy link
Member

Vheissu commented Jan 23, 2019

I love the idea of removing the need for Node.js in the Jest tests, however, I am unable to get this working with TypeScript/Jest and Webpack based app. Any test that requires staging a component (like a modal) fails with some weird errors @huochunpeng check the Discord when you get some time.

@shahabganji

This comment has been minimized.

Copy link
Contributor

shahabganji commented Jan 23, 2019

@EisenbergEffect, I checked the changes @huochunpeng had made on the same repository I was working on, and jest just works seamlessly. Worth mentioning that I am using Typescript. This is an in progress project, as it gets bigger and bigger I'll update the team with any issues if happened.

@Vheissu We also used this setting on aurelia-toolbelt/experimental based on webpack and typescript, cypress have been installed too for e2e test, and we have no problem running the basics. That might be helpful. Can you also let us know about the issue you are faced?

shahabganji added a commit to aurelia-toolbelt/aurelia-toolbelt that referenced this pull request Jan 23, 2019
Change some configuration for jest based on @huochunpeng 's suggestions [here](aurelia/cli#1019) and [here](aurelia/cli#1018 (comment))
@3cp 3cp changed the title feat(test): switch from aurelia-pal-nodejs to aurelia-pal-browser for jest setup WIP feat(test): switch from aurelia-pal-nodejs to aurelia-pal-browser for jest setup Jan 23, 2019
@3cp

This comment has been minimized.

Copy link
Member Author

3cp commented Jan 23, 2019

Waiting for a fix on aurelia-bootstrapper to remove the runtime dependency of aurelia-pal-nodejs.

@3cp

This comment has been minimized.

Copy link
Member Author

3cp commented Jan 24, 2019

  • update aurelia-bootstrapper to avoid loading aurelia-pal-nodejs aurelia/bootstrapper#70
  • need a polyfill for MutationObserver in jest(jsdom) env.
    • either move aurelia-pal-nodejs/src/polyfills/mutation-observer.ts to aurelia-polyfills.
    • or load the polyfill in test/jest-pretest.js. It means the app still has aurelia-pal-nodejs in dependencies.
    • use jsdom v13 to get latest MutationObserver polyfill.
  • @Vheissu has an unsolved issue: The class property of a object ([object HTMLDivElement]) cannot be assigned.
@EisenbergEffect

This comment has been minimized.

Copy link
Member

EisenbergEffect commented Jan 24, 2019

@huochunpeng I haven't looked in a while but is that MutationObserver polyfill usable in a browser context? I didn't think it was. I thought it was very JSDom-specific, in which case we wouldn't want to move it to the polyfills library, for example.

@3cp

This comment has been minimized.

Copy link
Member Author

3cp commented Jan 24, 2019

OK, I guess we only have option2, put it in jest-pretest.

@3cp

This comment has been minimized.

Copy link
Member Author

3cp commented Jan 30, 2019

Note: latest jsdom v13.2.0 has added MutationObserver!

… jest setup

jest by default does simulate browser environment. It's unnecessary to use pal-nodejs (which brings in jsdom but doesn't pollute global vars). Using pal-browser with default jest simulation has extra benefit: be more compatible with 3rd libs which expects global vars.
Using jest-environment-jsdom-thirteen for MutationObserver in jsdom v13.

cloese #1018
@3cp

This comment has been minimized.

Copy link
Member Author

3cp commented Feb 6, 2019

@Vheissu could you try one more time with jest-environment-jsdom-thirteen?

@Alexander-Taran

This comment has been minimized.

Copy link
Member

Alexander-Taran commented Apr 18, 2019

I've tried jest with jsdom env 13 and 14
with pal-browser
problem is that object prototypes are not the same and the setup fails at a simple class="${something}" or <element id="${something}"...

@fkleuver can share some insights

all in all there will be roadblocks with jest

I do get the appeal of jest as a no setup kitchen sink that gives feeling of a great achievement from the get go.
figuring out how to set up karma with jasmine took a lot of time that most devs don't have or are not willing to spend.

having a nice explained setup for karma/jasmine || karma/mocha that works and provides close value to jest could be more beneficial to community

testing apps in real browsers gave me more value.
for one I had a feature detection of input[type=color] with branching..
can't get coverage for that with jsdom

I'll share my karma setup and we could improve upon it.

@ghiscoding

This comment has been minimized.

Copy link
Contributor

ghiscoding commented Jul 6, 2019

Hey guys, I'm not sure if that makes any difference but I followed this article Unit-testing Aurelia with Jest + JSDOM + TypeScript + Pug and installed jsdom-global with my package.json

    "jest-environment-jsdom": "^24.8.0",
    "jsdom": "^15.1.1",
    "jsdom-global": "^3.0.2",

and then import 'jsdom-global/register'; in my jest-pretest.ts before globalize();.
So now I have JSDOM... well I think anyway.

Anyhow, the description of jsdom-global is

jsdom-global will inject document, window and other DOM API into your Node.js environment. Useful for running, in Node.js, tests that are made for browsers.

I'm not sure if that helps anyone, but might be worth mentioning anyway. At least doing this allowed me to get rid of some errors which I had before, for example, I had issues with Blob did not exist or was unknown, now this error is gone and I can continue with my tests. :)

@3cp

This comment has been minimized.

Copy link
Member Author

3cp commented Jul 25, 2019

closed in favour of aurelia/pal-nodejs#34

@3cp 3cp closed this Jul 25, 2019
@3cp 3cp deleted the 3cp:simplify-jest branch Jul 25, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

6 participants
You can’t perform that action at this time.