Migrate from Mocha to Jest

[miles170]

Closes #705.

[Maxim-Mazurok]

Sorry for not getting back to you earlier, now that I look at it, it's pretty hard to review changes to snapshots when they are all packed into one file with no syntax highlight... I would like to have them in separate files with proper extensions (to allow syntax highlight). I did a little investigation and didn't find an easy way to do this.

There's a jest plugin that can help us: https://github.com/igor-dv/jest-specific-snapshot

However, I find Jest to be significantly slower than Vitest, so if we would migrate from mocha/chai - we probably should migrate to Vitest. And I think that jest-specific-snapshot might work with Vitest since it has a lot of interoperability with Jest, but that needs to be confirmed.

TL;DR, let's investigate how we can keep snapshot files as they currently are, maybe by using Vitest with jest-specific-snapshot plugin

I appreciate your efforts, and it's unfortunate that I didn't see this through at first! Please feel free to post your findings/design here first before taking the time to code, thank you!

[miles170]

Sorry for not getting back to you earlier, now that I look at it, it's pretty hard to review changes to snapshots when they are all packed into one file with no syntax highlight... I would like to have them in separate files with proper extensions (to allow syntax highlight). I did a little investigation and didn't find an easy way to do this.

There's a jest plugin that can help us: https://github.com/igor-dv/jest-specific-snapshot

However, I find Jest to be significantly slower than Vitest, so if we would migrate from mocha/chai - we probably should migrate to Vitest. And I think that jest-specific-snapshot might work with Vitest since it has a lot of interoperability with Jest, but that needs to be confirmed.

TL;DR, let's investigate how we can keep snapshot files as they currently are, maybe by using Vitest with jest-specific-snapshot plugin

I appreciate your efforts, and it's unfortunate that I didn't see this through at first! Please feel free to post your findings/design here first before taking the time to code, thank you!

I would like to try separate snapshots in separate files first.
Maybe use the https://github.com/igor-dv/jest-specific-snapshot.

If everything works fine, maybe migrate Jest to Vitest.

[miles170]

It seems that even if we separated snapshots into separate files,
we wouldn't get syntax highlighting because snapshots are still stored as strings.

See jestjs/jest#2676 (comment)

[Maxim-Mazurok]

I see... I'd probably suggest creating a separate PR for #688
And then maybe research if there's any better solution for snapshot testing that would preserve syntax highlight in generated files.
Thank you!

[Maxim-Mazurok]

I've updated title and description for #705 to reflect our findings

[miles170]

I see... I'd probably suggest creating a separate PR for #688 And then maybe research if there's any better solution for snapshot testing that would preserve syntax highlight in generated files. Thank you!

Jest Snapshot Language Support provides syntax highlighting for your Jest snapshots.

[Maxim-Mazurok]

Well, it seems to kinda work for d.ts files:

But doesn't work well for package.json:

or markdown:

And also that's not an option when reviewing here on GitHub.

However, with Jest/Vitest snapshots we'll get multiplatform support and all other nice features for free, making this project easier for new contributors, among other things...

I think that if we could at least split templates into individual files, even without syntax highlighting the benefits probably would outweigh the limitations. What do you think?

[miles170]

I agree with you. It might be great if we first split snapshot files first, then go on to migrate to vest or syntax highlighting.

[miles170]

There is one problem with using jest-specific-snapshot that we have to write ChaiPlugin for it.

[Maxim-Mazurok]

Cool :)
Then let's do this:

• remove TS Version (Remove TS version #688) first in a separate PR, so that I can easily see what changed in old snapshots.
• Migrate these tests to Jest + jest-specific-snapshots (Maybe migrate from mySnapshotTest to Jest + jest-specific-snapshots #705)

Thanks!

[Maxim-Mazurok]

There is one problem with using jest-specific-snapshot that we have to write ChaiPlugin for it.

I don't think it's worth it, we probably can just migrate these tests to jest instead of using mocha-chai-jest-snapshot.

mocha-chai-jest-snapshot is kinda workaround to add snapshot testing for mocha/chai...

[miles170]

There is one problem with using jest-specific-snapshot that we have to write ChaiPlugin for it.

I don't think it's worth it, we probably can just migrate these tests to jest instead of using mocha-chai-jest-snapshot.

mocha-chai-jest-snapshot is kinda workaround to add snapshot testing for mocha/chai...

I'll see what I can do.

[miles170]

Playing around, I found out that jest with typescript did not play well with ES modules.

TS and ts-jest meet "type": "module"
jestjs/jest#9430

[Maxim-Mazurok]

Playing around, I found out that jest with typescript did not play well with ES modules.

TS and ts-jest meet "type": "module" facebook/jest#9430

Yeah, I've had a lot of trouble setting up jest with ES Modules, but sometimes I was lucky...
Perhaps we should look into using Vitest straight away since it promises to support ESM out-of-box

[miles170]

Playing around, I found out that jest with typescript did not play well with ES modules.
TS and ts-jest meet "type": "module" facebook/jest#9430

Yeah, I've had a lot of trouble setting up jest with ES Modules, but sometimes I was lucky... Perhaps we should look into using Vitest straight away since it promises to support ESM out-of-box

I migrated the test to Jest. If you wouldn't mind, please check the code. Thanks!

[Maxim-Mazurok]

Amazing job! I really appreciate your efforts. I've added some comments that I'd like to discuss/address before merging. Thank you!

[miles170]

All requested changes are resolved.

[Maxim-Mazurok]

I do appreciate the investigation and effort that went into making sure that snapshots are in individual files, I've never dealt with this before and this is for sure very interesting knowledge about jest's inner workings. Now I can see that this requires much more complication than I originally anticipated. Custom resolver, for example, is very advanced, requires a deep understanding of jest inner-workings, and in case jest breaks backward compatibility in future updates - it'll be very challenging to work with. And we can't use TS yet which isn't good for code quality. And we probably can't really test this complex logic.
Now having this full picture thanks to your research, I think that having one huge file with snapshots isn't that big of a problem. The default approach is quite good for JSON and TS files: it doesn't add extra escaping for double quotes and jest extension in VS Code lets you fold it and does a pretty good job at highlighting. Markdown README will be a challenge as it can't be folded and it takes up many pages so it might be challenging to understand the context, like from which test this part of README is. But that shouldn't be a huge problem.
I'm pretty happy with all the changes in tests. Do you think that it'd make sense to bring all the snapshots back into one file?
Thank you!

[miles170]

I do appreciate the investigation and effort that went into making sure that snapshots are in individual files, I've never dealt with this before and this is for sure very interesting knowledge about jest's inner workings. Now I can see that this requires much more complication than I originally anticipated. Custom resolver, for example, is very advanced, requires a deep understanding of jest inner-workings, and in case jest breaks backward compatibility in future updates - it'll be very challenging to work with. And we can't use TS yet which isn't good for code quality. And we probably can't really test this complex logic.
Now having this full picture thanks to your research, I think that having one huge file with snapshots isn't that big of a problem. The default approach is quite good for JSON and TS files: it doesn't add extra escaping for double quotes and jest extension in VS Code lets you fold it and does a pretty good job at highlighting. Markdown README will be a challenge as it can't be folded and it takes up many pages so it might be challenging to understand the context, like from which test this part of README is. But that shouldn't be a huge problem.
I'm pretty happy with all the changes in tests. Do you think that it'd make sense to bring all the snapshots back into one file?
Thank you!

Agreed! Thanks for your efforts.

[Maxim-Mazurok]

I have generated all types using the master branch, committed, then generated using your branch and compared the difference, there was none, except for one package where revision got updated. So I'm quite certain this won't break anything and will be very happy to merge it as soon as you fix that little timeout issue. Thank you so much!

[Maxim-Mazurok]

Turns out setting timeout to 0 doesn't disable timeouts in jest, please set it to 30000 instead, should give it enough time. It took just ~2 seconds for CI so that's why it didn't fail, but it tool just a little bit over the default 5s timeout on my computer (probably Australian internet to blame here)

[Maxim-Mazurok]

Fixed in a613f11

[Maxim-Mazurok]

Actually, I think it's easier and quicker to just merge it and fix the test myself

[Maxim-Mazurok]

Thank you again for an amazing job!