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.

Sign up for GitHub

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

Jump to bottom

Update toolchain (Jest/Vitest/ViteJS/TS) #724

Open
11 of 13 tasks
sergei-maertens opened this issue Oct 24, 2024 · 0 comments · Fixed by #745 or #766
Open
11 of 13 tasks

Update toolchain (Jest/Vitest/ViteJS/TS) #724

sergei-maertens opened this issue Oct 24, 2024 · 0 comments · Fixed by #745 or #766
Assignees
@sergei-maertens

Comments

@sergei-maertens
Copy link
Member

sergei-maertens commented Oct 24, 2024 •
edited
Loading

Umbrella ticket for tasks and their order to update our toolchain to modern standards.

Short summary - CRA is dead and for us ViteJS looks very viable. We need to upgrade because at some point it won't be possible to upgrade Storybook etc. anymore or we'll be forced to work with deprecated APIs/tooling, which hurts development speed.
@sergei-maertens sergei-maertens mentioned this issue Nov 17, 2024
Merged
sergei-maertens added a commit that referenced this issue Nov 17, 2024
@sergei-maertens
➕ [#724] Add vitest dependency
b75de95 
Starting from https://vitest.dev/guide/ - this will replace jest
as test runner.
sergei-maertens added a commit that referenced this issue Nov 17, 2024
@sergei-maertens
🔧 [#724] Add vite config file
a95f466 
An earlier prototype at least made `npm start` functional
with this config, and we'd like to have the build pipeline
(separate PR) use the same config as the tests.
sergei-maertens added a commit that referenced this issue Nov 17, 2024
@sergei-maertens
🔧 [#724] Configure test setup for jest compatibility
8620c3b 
* Ensure the test globals are injected (vitest doesn't do this by default)
* Point to setup file to ensure jest matchers are registered (requires
  them to be registered as globals first)
sergei-maertens added a commit that referenced this issue Nov 17, 2024
@sergei-maertens
👽 [#724] Replace jest mocks with vitest mocks
6cd0747
sergei-maertens added a commit that referenced this issue Nov 17, 2024
@sergei-maertens
👽 [#724] Replace jest mocks with vitest mocks
02cdabd
sergei-maertens added a commit that referenced this issue Nov 17, 2024
@sergei-maertens
👽 [#724] Vitest doesn't support the done callback
8c753a8 
Instead, the most elegant way to handle this is to use async/await
syntax.
sergei-maertens added a commit that referenced this issue Nov 17, 2024
@sergei-maertens
👽 [#724] Replace jest mocks with vitest mocks
fd24d00
sergei-maertens added a commit that referenced this issue Nov 17, 2024
@sergei-maertens
👽 [#724] Vitest doesn't support the done callback
f20718c 
Instead, the most elegant way to handle this is to use async/await
syntax.
sergei-maertens added a commit that referenced this issue Nov 17, 2024
@sergei-maertens
🧑‍💻 [#724] Use aliases for tests
f68f3e1 
When using relative imports, vite/vitest complain about ESM modules
being used through a CJS package, and setting type: module in
package.json breaks a lot of other things. Renaming the module to
.mts pushes the problem down the chain. It seems that using the
import alias seems to work to resolve the api-mocks package,
but there are plenty of other problems...
@sergei-maertens sergei-maertens mentioned this issue Nov 26, 2024
Merged
@sergei-maertens sergei-maertens self-assigned this Nov 26, 2024
sergei-maertens added a commit that referenced this issue Nov 26, 2024
@sergei-maertens
➕ [#724] Add vitest dependency
811279d 
Starting from https://vitest.dev/guide/ - this will replace jest
as test runner.
sergei-maertens added a commit that referenced this issue Nov 26, 2024
@sergei-maertens
🔧 [#724] Add vite config file
597b0ba 
An earlier prototype at least made `npm start` functional
with this config, and we'd like to have the build pipeline
(separate PR) use the same config as the tests.
sergei-maertens added a commit that referenced this issue Nov 26, 2024
@sergei-maertens
🔧 [#724] Configure test setup for jest compatibility
3cfd741 
* Ensure the test globals are injected (vitest doesn't do this by default)
* Point to setup file to ensure jest matchers are registered (requires
  them to be registered as globals first)
sergei-maertens added a commit that referenced this issue Nov 26, 2024
@sergei-maertens
👽 [#724] Replace jest mocks with vitest mocks
cfff05a
sergei-maertens added a commit that referenced this issue Nov 26, 2024
@sergei-maertens
👽 [#724] Vitest doesn't support the done callback
f6319b6 
Instead, the most elegant way to handle this is to use async/await
syntax.
sergei-maertens added a commit that referenced this issue Nov 26, 2024
@sergei-maertens
🧑‍💻 [#724] Use aliases for tests
3a6599b 
When using relative imports, vite/vitest complain about ESM modules
being used through a CJS package, and setting type: module in
package.json breaks a lot of other things. Renaming the module to
.mts pushes the problem down the chain. It seems that using the
import alias seems to work to resolve the api-mocks package,
but there are plenty of other problems...
sergei-maertens added a commit that referenced this issue Nov 26, 2024
@sergei-maertens
👷 [#724] Add vite tests to CI
b60fae5
@sergei-maertens sergei-maertens mentioned this issue Nov 26, 2024
Merged
sergei-maertens added a commit that referenced this issue Nov 26, 2024
@sergei-maertens
🔨 [#724] Swap out Jest for Vitest
90ebe7f 
Set up a vite config and vitest configuration to transform our code
and setup into something that compiles and passes the tests. Create
React App is dead and the official React docs recommend using a
framework like Next.js/Redux or a toolchain like Vite when building
a low level library.

We start with migrating the test suite to the Vite ecosystem before
touching the bundler itself. This way we get most of the hiccups out
of the way, while (hopefully) minimizing impact on actual production
artifacts.

Jest configuration has been removed from package.json. It's currently
still used under the hood by storybook, but that too will be migrated
in due time.

We're sticking with jsdom for the time being - Vitest can run tests in
a real browser, but it's still marked as experimental and we don't
appear to be running into the same issues for MSW as we did with jest,
which required a workaround by using a fixed jsdom environment.
sergei-maertens added a commit that referenced this issue Nov 26, 2024
@sergei-maertens
🔥 [#724] Remove jest-related files
ec5a663 
These scripts/config files were necessary in a cra-jest setup, but are now
obsolete when using vitest. 👋
sergei-maertens added a commit that referenced this issue Nov 26, 2024
@sergei-maertens
👽 [#724] Update tests and stories to work with Vitest
2e4447b 
* Replaced the jest mocks with vi mocks (which is the equivalent in
  vitest)
* Replaced useFakeTimers with just mocking the system date/time, which
  is simpler in vitest. Note that using fake timers seems to have some
  challenges, but ultimately there shouldn't really be a need for that
  anymore.
* Updated the stories to deal with the index.js -> index.jsx renames,
  which don't automatically resolve when doing directory imports
* Rewrite more tests from legacy react test utils to testing-library/
  react style tests, which are more pleasant to read and write and do
  encourage proper accessible queries
sergei-maertens added a commit that referenced this issue Nov 29, 2024
@sergei-maertens
⬆️ [#724] First upgrade to latest SB patch release
f31fad4
sergei-maertens added a commit that referenced this issue Nov 29, 2024
@sergei-maertens
🧑‍💻 [#724] Switch to react-vite builder
976098d
sergei-maertens added a commit that referenced this issue Nov 29, 2024
@sergei-maertens
👽 [#724] JSX syntax requires .jsx extension
ec850d5
sergei-maertens added a commit that referenced this issue Nov 29, 2024
@sergei-maertens
🧑‍💻 [#724] Handle env reading/processing in both Vite and CRA setups
f3f66d3 
We can detect the environment based on the presence of 'process' or
not, and adapt the reading of environment variables based on the
detected environment.

This means that we currently have to duplicate the configuration,
but as long as this is a temporary measure, we should be fine.
sergei-maertens added a commit that referenced this issue Nov 29, 2024
@sergei-maertens
👽 [#724] Update react-intl addon init code to not use require
9d553e9 
require doesn't exist in Vite, but import.meta can be used
instead.
sergei-maertens added a commit that referenced this issue Jan 1, 2025
@sergei-maertens
👷 [#724] Add ESLint check to CI
d179adb 
Run a matrix of lint jobs so that we can run both
prettier and ESLint together and consider the entire
job as a dependency for other jobs.
@sergei-maertens sergei-maertens moved this to Todo in Development Jan 1, 2025
@sergei-maertens sergei-maertens moved this from Todo to In Progress in Development Jan 1, 2025
sergei-maertens added a commit that referenced this issue Jan 3, 2025
@sergei-maertens
🚨 [#724] Fix ESLint warnings and errors
9fc82a9 
Non-bundled code was not linted before when using the 'standard' CRA
setup, and adding the explicit linting now to CI and npm scripts
reveals quite a number of issues.
sergei-maertens added a commit that referenced this issue Jan 3, 2025
@sergei-maertens
🤡 [#724] Fix broken mocks by lazy loading the Formio module
3fa646d
sergei-maertens added a commit that referenced this issue Jan 3, 2025
@sergei-maertens
🔧 [#724] Set up jsx-a11y eslint plugin
6f3255e
sergei-maertens added a commit that referenced this issue Jan 3, 2025
@sergei-maertens
🔧 [#724] Set up eslint-plugin-prettier
826b1b5 
This includes the upgrade to prettier v3
sergei-maertens added a commit that referenced this issue Jan 3, 2025
@sergei-maertens
🚨 [#724] Reformat with prettier v3
2e945c6
sergei-maertens added a commit that referenced this issue Jan 3, 2025
@sergei-maertens
🔥 [#724] Drop legacy eslint config in package.json
1860457 
eslint.config.mjs has precedence anyway.
@sergei-maertens sergei-maertens mentioned this issue Jan 3, 2025
Closed
sergei-maertens added a commit that referenced this issue Jan 4, 2025
@sergei-maertens
🔥 [#724] Drop legacy eslint config in package.json
d67f249 
eslint.config.mjs has precedence anyway.
sergei-maertens added a commit that referenced this issue Jan 4, 2025
@sergei-maertens
Merge pull request #762 from open-formulieren/cleanup/724-drop-legacy…
367bb02 
…-eslint-config

🔥 [#724] Drop legacy eslint config in package.json
@sergei-maertens sergei-maertens mentioned this issue Jan 6, 2025
Merged
sergei-maertens added a commit that referenced this issue Jan 6, 2025
@sergei-maertens
🔨 [#724] Replace CRA with Vite for 'npm start'
1f2f4f3
sergei-maertens added a commit that referenced this issue Jan 6, 2025
@sergei-maertens
🔨 [#724] Replace CRA prod build with Vite build
1d43c46 
dist-vite is now dist, obsoleting the CRA build artifacts.
sergei-maertens added a commit that referenced this issue Jan 6, 2025
@sergei-maertens
🚚 [#724] Move prepare-package.js to bin folder
6560c7e 
The 'scripts' directory is being removed with the removal of CRA.
sergei-maertens added a commit that referenced this issue Jan 6, 2025
@sergei-maertens
🔥 [#724] Delete CRA scripts
5e1590b 
start.js and build.js were the react-scripts entrypoints for CRA. They
have been obsoleted by switching to Vite in the package.json scripts.
sergei-maertens added a commit that referenced this issue Jan 6, 2025
@sergei-maertens
🚚 [#724] Move i18n-formatter helper script to bin folder
7429dcd 
Utility/development scripts are now properly colocated in the bin/
folder, for consistency across projects/repositories.
sergei-maertens added a commit that referenced this issue Jan 6, 2025
@sergei-maertens
🎨 [#724] Convert prepare-package.js to module and drop dependency on …
3847a88 
…config/paths.js
sergei-maertens added a commit that referenced this issue Jan 6, 2025
@sergei-maertens
🔥 [#724] Delete CRA configuration files
97abe0d 
Everything is replaced with Vite configuration.
@sergei-maertens sergei-maertens mentioned this issue Jan 6, 2025
Merged
sergei-maertens added a commit that referenced this issue Jan 6, 2025
@sergei-maertens
🙈 [#724] build folder contains actual useful code now
eee8f1d
sergei-maertens added a commit that referenced this issue Jan 6, 2025
@sergei-maertens
🔥 [#724] Drop support for CRA envvars
4025947 
These have been replaced with their VITE_* counterparts or are entirely
obsoleted now.
sergei-maertens added a commit that referenced this issue Jan 6, 2025
@sergei-maertens
➖ [#724] Remove react-scripts (CRA) dependencies
74f9aff
sergei-maertens added a commit that referenced this issue Jan 6, 2025
@sergei-maertens
➖ [#724] Remove react-scripts (CRA) dev dependencies
e8d8763 
And some other stuff that appears to not be used anymore.
@github-project-automation github-project-automation bot moved this from In Progress to Done in Development Jan 8, 2025
@github-project-automation github-project-automation bot moved this from Done to In Progress in Development Jan 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sergei-maertens sergei-maertens

Labels
None yet
Projects
Development
Status: In Progress
Milestone
No milestone
1 participant
@sergei-maertens