Bootstrap: Switch from QUnit to Jasmine

[Johann-S]

In v5, we should rewrite our unit tests without QUnit and SinonJS by using Jasmine.

[bkdotcom]

For us newbs / transparency, why the change?
Any consideration given to Mocha or Jest?

pretty good comparison of frameworks:
https://raygun.com/blog/javascript-unit-testing-frameworks/

https://medium.com/airbnb-engineering/unlocking-test-performance-migrating-from-mocha-to-jest-2796c508ec50

[Johann-S]

Because to have good unit tests we have to use QUnit + SinonJS, because QUnit alone isn't enough.

Jasmine is enough to create good unit tests, because in Jasmine you have asserts (like in QUnit) and other features like Spy, Stub, Mock (like in SinonJS). So instead of two dev dependencies, we switch to one dev dependency.

About Jest, not in favor because it use JSDom under the hood, which is an emulate DOM, I prefer to test on real browsers.

If we choose to use Mocha, we will have to add another libs for assertion (like Chai) and maybe SinonJS, so between 2 or 3 new dev dependencies.

I think QUnit was a good choice because Bootstrap use jQuery, but in v5 we won't have jQuery.

[ZuBB]

About Jest, not in favor because it use JSDom under the hood, which is an emulate DOM, I prefer to test on real browsers.

sorry for my 5c, but at quick look this issue has a solution -- jest-browser

Run Jest tests in a real browser! No more fake DOM! This Jest environment uses puppeteer to run tests in both headless and windowed Chrome/Chromium

here is a link to issue where webpack team migrated from _mocha_ to _jest_. my guess is that your case is not same as theirs but still possibly you will find some interesting details https://github.com/webpack/webpack/pull/6565

[Johann-S]

I thank you @ZuBB for your feedback 👍

About jest-browser, it seems it runs only Chrome or Chromium, and unfortunately we support severals browsers so it's not enough 😟

It seems it's an opened issue on Jest repository : https://github.com/facebook/jest/issues/848 but currently there is no official solution.

But if an official solution is provided before we begin to migrate from QUnit to Jasmine, I would be more than happy to take a look at it 👍

[bershanskiy]

@Johann-S I started working on this issue and would like to make sure my approach is correct:

• I created folder [bootstrap]\js\tests\jasmine to store [bootstrap]\js\tests\jasmine\karma.conf.js and rewrites of each test file. This way there are simultaneously old QUnit+SinonJS tests and the rewrites in Jasmine.
• I just rewrite existing tests into equivalent tests without adding/removing any tests.
• However, I avoid jQuery (use regular JS instead) and take advantage of const and let where appropriate (for unit tests it doesn't matter much either way, but the rest of the code base uses them so it better be consistent).

[Johann-S]

Hi @bershanskiy,

This issue isn't ready to be tackled I have to add a lot of things before the beginning of this one because Bootstrap file structure will change a lot, I'll update this issue when everything is ready

[Johann-S]

Closed thanks to: #28518