Use jsdom instead of window in jest test #1812
Conversation
|
Testable here: http://pr1812.cs.lbogdan.tk/s/n3j6r28z10 |
kentcdodds
left a comment
kentcdodds
left a comment
There was a problem hiding this comment.
Thanks for working on this!
At first glance, this probably will lead to bugs 😬
| jest: jestMock, | ||
| test, | ||
| it, | ||
| document, |
There was a problem hiding this comment.
I'm guessing this is the "globals" object. This could be pretty problematic if it's not overriding all browser globals (you'd end up with window !== document.window in tests for example)...
There was a problem hiding this comment.
Yeah, I need to take a closer look at how Jest implements this. I initially tried to replace window, but this broke all tests for some reason. Will need to do some more testing
| }; | ||
|
|
||
| const { JSDOM } = JSDOM2; | ||
| const { window } = new JSDOM(''); |
There was a problem hiding this comment.
This should maybe be initialized the same way it is in jest?
There was a problem hiding this comment.
Ah nice, thanks for the pointer! I'll take a look, maybe we can have a 1:1 implementation!
|
Probably, I just wanted to take a look if something would work before going to sleep. I can come up with a list of things that need to happen before we can merge this tomorrow. |
|
Thanks for looking into it!! |
|
My test sandbox: https://codesandbox.io/s/vvy844w25. I need to make it possible to set the globals dynamically (instead of using |
CompuIves
changed the title
|
I think we're now very close in terms of API with Jest @kentcdodds. I also improved the integration with the problem view and the UI, with some scrolling fixes. Looks like this now: |
|
Awesome! Thanks! Any chance we can fix the eslint errors for the test globals? |
|
Those errors in the screenshot are actual errors because the tests failed there 😄
|
|
Oooohhhhhh 😅 nice! |
* Hacky implementation of jsdom inside jest tests * Update path to jsdom * Properly set globals according to jest defaults * Properly set global to jsdom window * Make globals dynamic * Improve scrolling of tests view * Proper fix for the styling of tests * Convert jest-lite to typescript * Fix scrolling for the full test details * Deduplicate Tests container * Properly mark errors as jest errors, clear them on new start * Move clear error to less spammy place * Fix error loading later on in the editor
* Hacky implementation of jsdom inside jest tests * Update path to jsdom * Properly set globals according to jest defaults * Properly set global to jsdom window * Make globals dynamic * Improve scrolling of tests view * Proper fix for the styling of tests * Convert jest-lite to typescript * Fix scrolling for the full test details * Deduplicate Tests container * Properly mark errors as jest errors, clear them on new start * Move clear error to less spammy place * Fix error loading later on in the editor
* add themes to the tests tab * clea clors * clean more colors * fix arrows * fix other arrow * Use jsdom instead of window in jest test (#1812) * Hacky implementation of jsdom inside jest tests * Update path to jsdom * Properly set globals according to jest defaults * Properly set global to jsdom window * Make globals dynamic * Improve scrolling of tests view * Proper fix for the styling of tests * Convert jest-lite to typescript * Fix scrolling for the full test details * Deduplicate Tests container * Properly mark errors as jest errors, clear them on new start * Move clear error to less spammy place * Fix error loading later on in the editor * add bg
Hacky implementation, I need to improve the performance and probably code split + find a better way to require jsdom inside the browser. But it works!
This replaces
documentin tests with a version provided byjsdom, same way as how it happens in Jest. This means that the DOM of the application and the tests are not conflicting in any way.It's not as good as running the tests in a separate context, but building that requires us to extract the
listen/dispatchfirst to a version that's not global.Fixes #1800.