Skip to content

Run frontend unit tests using vitest instead of jest #246

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

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

Run frontend unit tests using vitest instead of jest #246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a41541f
Run frontend unit tests using vitest instead of jest
davisagli Jun 6, 2025
d8330c6
Restore making ci-test pass if there are no tests
davisagli Jun 6, 2025
ddaf587
fix test
davisagli Jun 6, 2025
e85ebf4
babel.config.cjs
davisagli Jun 6, 2025
39ea128
Don't turn addons into ESM modules, razzle doesn't fully support it
davisagli Jun 12, 2025
cde9be0
update test
davisagli Jun 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions templates/add-ons/frontend/cookiecutter.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@
"__version_mrs_developer": "^2.2.0",
"__version_pnpm": "9.1.1",
"__version_release_it": "^17.1.1",
"__version_testing_library_react": "^16.2.0",
"__version_vitest": "^3.1.2",
"__node_version": "{{ cookiecutter.volto_version | node_version_for_volto }}",
"__gha_version_node": "{{ cookiecutter.__node_version }}",
"__gha_version_checkout": "v4",
Expand Down
4 changes: 2 additions & 2 deletions templates/add-ons/frontend/{{ cookiecutter.__folder_name }}/Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,8 @@ test: ## Run unit tests
.PHONY: ci-test
ci-test: ## Run unit tests in CI
# Unit Tests need the i18n to be built
VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n
CI=1 RAZZLE_JEST_CONFIG=$(CURRENT_DIR)/jest-addon.config.js pnpm --filter @plone/volto test -- --passWithNoTests
VOLTOCONFIG=$(CURRENT_DIR)/volto.config.js pnpm --filter @plone/volto i18n
CI=1 pnpm test -- --passWithNoTests

.PHONY: backend-docker-start
backend-docker-start: ## Starts a Docker-based backend for development
Expand Down
17 changes: 0 additions & 17 deletions templates/add-ons/frontend/{{ cookiecutter.__folder_name }}/jest-addon.config.js
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion templates/add-ons/frontend/{{ cookiecutter.__folder_name }}/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"build": "VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto build",
"build:deps": "pnpm --filter @plone/registry --filter @plone/components build",
"i18n": "pnpm --filter {{ cookiecutter.__npm_package_name }} i18n && VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n",
"test": "RAZZLE_JEST_CONFIG=$(pwd)/jest-addon.config.js pnpm --filter @plone/volto test -- --passWithNoTests",
"test": "pnpm --filter {{ cookiecutter.__npm_package_name }} exec vitest",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if we have more than one package in the monorepo? Can't we run all the tests at once?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@wesleybl we are just replicating how the ecosystem works. If one package has tests, it should depend on vitest, hence, you have to be able to run it in the package itself. The monorepo is not a buildout. It's a way of tie together NodeJS packages.

You can still run them all at once with pnpm, that's why the --filter option exist.

pnpm --filter mypackage1 --filter mypackage2 exec vitest

The monorepo managers (as in turborepo, etc) also does this, they orchestrate commands through different packages who are meant to act independently.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sneridagh But generally, in monorepos, it's common for the root test script to run tests for all packages. Shouldn't we expect this here? If not, and someone wants to have more than one package in the monorepo, they would have to "customize" the package.json created by cookieplone. It could be something like:

   "test": "pnpm --filter './packages/*' exec vitest"

"lint": "VOLTOCONFIG=$(pwd)/volto.config.js eslint --max-warnings=0 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
"lint:fix": "VOLTOCONFIG=$(pwd)/volto.config.js eslint --fix 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
"prettier": "prettier --check 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
Expand Down
4 changes: 3 additions & 1 deletion ...ookiecutter.__folder_name }}/packages/{{ cookiecutter.frontend_addon_name }}/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@
},
"devDependencies": {
"@plone/scripts": "{{ cookiecutter.__version_plone_scripts }}",
"release-it": "{{ cookiecutter.__version_release_it }}"
"@testing-library/react": "{{ cookiecutter.__version_testing_library_react }}",
"release-it": "{{ cookiecutter.__version_release_it }}",
"vitest": "{{ cookiecutter.__version_vitest }}"
}
}
13 changes: 13 additions & 0 deletions ...cutter.__folder_name }}/packages/{{ cookiecutter.frontend_addon_name }}/vitest.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { defineConfig } from 'vitest/config';
import voltoVitestConfig from '@plone/volto/vitest.config.mjs';
import path from 'path';

export default defineConfig({
...voltoVitestConfig,
resolve: {
alias: {
'@plone/volto': path.resolve(__dirname, '../../core/packages/volto/src'), // Add paths accordingly
// 'promise-file-reader': require.resolve('promise-file-reader') // Add to identify dependency from package
},
},
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't the test configuration be in the root folder of the monorepo, as is done with Jest? This way it is not necessary to repeat the configuration when we have more than one package in the monorepo.

4 changes: 2 additions & 2 deletions templates/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,8 @@ test: ## Run unit tests
.PHONY: ci-test
ci-test: ## Run unit tests in CI
# Unit Tests need the i18n to be built
VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n
CI=1 RAZZLE_JEST_CONFIG=$(CURRENT_DIR)/jest-addon.config.js pnpm --filter @plone/volto test -- --passWithNoTests
VOLTOCONFIG=$(CURRENT_DIR)/volto.config.js pnpm --filter @plone/volto i18n
CI=1 pnpm test -- --passWithNoTests

.PHONY: backend-docker-start
backend-docker-start: ## Starts a Docker-based backend for development
Expand Down
2 changes: 1 addition & 1 deletion templates/sub/project_settings/{{ cookiecutter.__folder_name }}/frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"build": "VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto build",
"build:deps": "pnpm --filter @plone/registry --filter @plone/components build",
"i18n": "pnpm --filter {{ cookiecutter.__npm_package_name }} i18n && VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n",
"test": "RAZZLE_JEST_CONFIG=$(pwd)/jest-addon.config.js pnpm --filter @plone/volto test -- --passWithNoTests",
"test": "pnpm --filter {{ cookiecutter.__npm_package_name }} exec vitest",
"lint": "VOLTOCONFIG=$(pwd)/volto.config.js eslint --max-warnings=0 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
"lint:fix": "VOLTOCONFIG=$(pwd)/volto.config.js eslint --fix 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
"prettier": "prettier --check 'packages/**/src/**/*.{js,jsx,ts,tsx}'",
Expand Down
2 changes: 1 addition & 1 deletion tests/templates/add-ons/frontend/test_frontend_cutter.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
".prettierrc",
".stylelintrc",
"cypress.config.js",
"jest-addon.config.js",
"Makefile",
"mrs.developer.json",
"package.json",
Expand All @@ -55,6 +54,7 @@
"src/index.js",
"towncrier.toml",
"tsconfig.json",
"vitest.config.mjs",
]


Expand Down
1 change: 0 additions & 1 deletion tests/templates/projects/monorepo/test_project_frontend.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
".prettierrc",
".stylelintrc",
"cypress.config.js",
"jest-addon.config.js",
"Dockerfile",
"Makefile",
"mrs.developer.json",
Expand Down
Loading