Use Jest for JavaScript unit tests #1484
Assignees
Labels
ADR/needed
A decision has been made and it needs to be documented
area/frontend
area/unit tests
impact/changelog
This change should be reflected in the NEWS.txt file
refactoring
Milestone
Comments
php-coder
added
refactoring
area/unit tests
area/documentation
area/frontend
ADR/needed
php-coder
changed the title
This was referenced Jan 10, 2021
php-coder
added a commit
that referenced
this issue
Jan 10, 2021
Later this configuration will be shared between Babel and Jest. Part of #1484
php-coder
added a commit
that referenced
this issue
Jan 10, 2021
The following dependencies have been installed: - jest: the testing framework - babel-jest: integration for Babel (https://jestjs.io/docs/en/getting-started#using-babel), otherwise tests fail with "Support for the experimental syntax 'jsx' isn't currently enabled" - @testing-library/react: the library for testing React components - @testing-library/jest-dom: useful matches for inspecting DOM - react and react-dom: in order to import React in tests All the dependencies were installed by the command: ./mvnw -Pfrontend frontend:npm -Dfrontend.npm.arguments='install --save-dev jest babel-jest @testing-library/react @testing-library/jest-dom react@16.8.6 react-dom@16.8.6' In order to execute (or execute and watch) the tests, run: ./mvnw -Pfrontend frontend:npm -Dfrontend.npm.arguments='test' or ./mvnw -Pfrontend frontend:npm -Dfrontend.npm.arguments='run watch-test' Alternatively, it's possible to use npx: cd src/main/frontend npx jest or npx jest --watch Note that at the moment of this commit, there is no tests yet, so the previous command will fail. While I marked React as an external (see webpack.config.js), all bundles got additional 5 Kb and I couldn't figure out why. Perhaps, it's how it should work, but I'm not sure as I expected that bundles size will stay the same. Useful links: - https://jestjs.io - https://github.com/testing-library/react-testing-library - https://github.com/testing-library/jest-dom - https://www.newline.co/@dmitryrogozhny/how-to-start-using-react-testing-library--0e7695e8 Part of #1484
php-coder
added a commit
that referenced
this issue
Jan 10, 2021
See for details: jestjs/jest#5064 (comment) Relate to #1484
php-coder
added a commit
that referenced
this issue
Jan 10, 2021
…e by Jest Previously, tests that use "import" were failing: [ERROR] ● Test suite failed to run [ERROR] [ERROR] Jest encountered an unexpected token [ERROR] [ERROR] This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. [ERROR] [ERROR] By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules". [ERROR] [ERROR] Here's what you can do: [ERROR] • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it. [ERROR] • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config. [ERROR] • If you need a custom transformation specify a "transform" option in your config. [ERROR] • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option. [ERROR] [ERROR] You'll find more details and examples of these config options in the docs: [ERROR] https://jestjs.io/docs/en/configuration.html [ERROR] [ERROR] Details: [ERROR] [ERROR] /Users/coder/git/mystamps/src/main/frontend/src/components/AddCommentForm.test.js:1 [ERROR] ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { render, screen } from '@testing-library/react'; [ERROR] ^ [ERROR] [ERROR] SyntaxError: Unexpected token { [ERROR] [ERROR] at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14) See also: https://github.com/ActuallyACat/jest-esm-transformer Part of #1484
php-coder
added a commit
that referenced
this issue
Jan 11, 2021
…omponent This change is also needed by #1484: - the "role" attribute makes the alert "searchable" by screen.getByRole() - the "aria-label" attribute makes the form "searchable" by screen.getByRole() (testing-library/dom-testing-library#474 (comment)) Part of #1493
This was referenced Jan 12, 2021
php-coder
added
impact/changelog
php-coder
added a commit
that referenced
this issue
Nov 10, 2021
This makes possible to use Jest for JavaScript unit tests. The public URL of DateUtils.js has been changed from /public/js/$VERSION/DateUtils.min.js to /public/js/$VERSION/utils/DateUtils.min.js and technically old cached code might search by the old location but as this file wasn't available to anonymous users, the chances are extremely low. Part of #1484
php-coder
added a commit
that referenced
this issue
Nov 10, 2021
This makes possible to use Jest for JavaScript unit tests. The public URL of DateUtils.js has been changed from /public/js/$VERSION/CatalogUtils.min.js to /public/js/$VERSION/utils/CatalogUtils.min.js and technically old cached code might search by the old location but as this file wasn't available to anonymous users, the chances are extremely low. Part of #1484
php-coder
added a commit
that referenced
this issue
Nov 10, 2021
The existing JS unit tests are now being run on CI. Part of #1484
php-coder
added a commit
that referenced
this issue
Jan 22, 2022
See also: https://docs.npmjs.com/cli/v6/commands/npm-install-ci-test Correction for 9189bf7 commit. Relate to #1484
|
This seems like fully fixed now. At least, I wasn't able to find what is left. |
php-coder
added
the
ADR/needed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Let's rewrite our tests from Jasmine to Jest and also use Jest for testing React components.
The text was updated successfully, but these errors were encountered: