Skip to content

Commit 0476639

Browse files
AlemTuzlakAlemTuzlak
authored
Browser mode with vitest & test suite improvements (#21)
# Description Adds the following setup to our vitest runner: - Runs generic test files (`.test`) in both server and browser environments - Runs browser test files `.browser.test` in browser environments - Runs server test files `.server.test` in server environments ## Type of change Please mark relevant options with an `x` in the brackets. - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] This change requires a documentation update - [ ] Algorithm update - updates algorithm documentation/questions/answers etc. - [ ] Other (please describe): # How Has This Been Tested? Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration - [ ] Integration tests - [ ] Unit tests - [ ] Manual tests - [ ] No tests required # Reviewer checklist Mark everything that needs to be checked before merging the PR. - [ ] Check if the UI is working as expected and is satisfactory - [ ] Check if the code is well documented - [ ] Check if the behavior is what is expected - [ ] Check if the code is well tested - [ ] Check if the code is readable and well formatted - [ ] Additional checks (document below if any) # Screenshots (if appropriate): # Questions (if appropriate):
1 parent ae9230e commit 0476639

File tree

13 files changed

+577
-1954
lines changed

13 files changed

+577
-1954
lines changed

‎.github/workflows/validate.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ jobs:
4747
node-version-file: "package.json"
4848
cache: "pnpm"
4949
- run: pnpm install --prefer-offline --frozen-lockfile
50+
- run: pnpm exec playwright install chromium --with-deps
5051
- run: pnpm run test:cov
5152
- name: "Report Coverage"
5253
# Only works if you set `reportOnFailure: true` in your vite config as specified above

‎.gitignore

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -75,18 +75,6 @@ blob-report
7575
.idea/usage.statistics.xml
7676
.idea/shelf
7777

78-
79-
# Make it harder to accidentally commit files in the root
80-
/*.json
81-
/*.yaml
82-
/*.yml
83-
/*.toml
84-
/*.ts
85-
/*.tsx
86-
/*.js
87-
/*.jsx
88-
/*.sh
89-
9078
# Dont commit sqlite database files
9179
*.db
9280
*.sqlite

‎.vscode/settings.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"*.ts": "${basename}.*.${extname}",
3535
".env": ".env.*",
3636
"*.tsx": "${basename}.*.${extname},${basename}.*.ts",
37-
"package.json": "*.json, *.yml, *.config.js, *.config.ts, *.yaml",
37+
"package.json": "*.json, *.yml, *.config.js, *.config.ts, *.yaml, *.workspace.ts",
3838
"readme*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README-*, README_*, RELEASE_NOTES*, ROADMAP.MD, Readme-*, Readme_*, Release_Notes*, Roadmap.md, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme-*, readme_*, release_notes*, roadmap.md, security.md, sponsors*",
3939
"Readme*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README-*, README_*, RELEASE_NOTES*, ROADMAP.MD, Readme-*, Readme_*, Release_Notes*, Roadmap.md, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme-*, readme_*, release_notes*, roadmap.md, security.md, sponsors*",
4040
"README*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README-*, README_*, RELEASE_NOTES*, ROADMAP.MD, Readme-*, Readme_*, Release_Notes*, Roadmap.md, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme-*, readme_*, release_notes*, roadmap.md, security.md, sponsors*",

‎app/localization/i18n.server.test.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import remixI18n from "./i18n.server"
2+
3+
describe("Remix I18n", () => {
4+
it("returns the correct default language from the request", async () => {
5+
const request = new Request("http://localhost:3000")
6+
const defaultLanguage = await remixI18n.getLocale(request)
7+
expect(defaultLanguage).toBe("en")
8+
})
9+
10+
it("returns the correct default language from the request if search param lang is invalid", async () => {
11+
const request = new Request("http://localhost:3000?lng=invalid")
12+
const defaultLanguage = await remixI18n.getLocale(request)
13+
expect(defaultLanguage).toBe("en")
14+
})
15+
16+
it("returns the correct language when specified in the search params from the request", async () => {
17+
const request = new Request("http://localhost:3000?lng=bs")
18+
const defaultLanguage = await remixI18n.getLocale(request)
19+
expect(defaultLanguage).toBe("bs")
20+
})
21+
})

‎app/routes/_index.test.tsx renamed to ‎app/routes/_index.browser.test.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import * as Module from "./_index"
22

33
describe("Home route", () => {
4-
it("should render the home page text properly in english", async ({
5-
renderStub,
6-
/** debug */
7-
}) => {
8-
const { container } = await renderStub({
4+
it("should render the home page text properly in english", async ({ renderStub }) => {
5+
const { getByText } = await renderStub({
96
entries: [
107
{
118
id: "home",
@@ -14,16 +11,16 @@ describe("Home route", () => {
1411
},
1512
],
1613
})
17-
// debug()
14+
1815
expect(
19-
container.queryByText("React Router is awesome!", {
16+
getByText("React Router is awesome!", {
2017
exact: false,
2118
})
2219
).not.toBeNull()
2320
})
2421

2522
it("should render the home page text properly in bosnian", async ({ renderStub }) => {
26-
const { container } = await renderStub({
23+
const { getByText } = await renderStub({
2724
entries: [
2825
{
2926
id: "home",
@@ -37,7 +34,7 @@ describe("Home route", () => {
3734
})
3835

3936
expect(
40-
container.queryByText("React Router je zakon!", {
37+
getByText("React Router je zakon!", {
4138
exact: false,
4239
})
4340
).not.toBeNull()

‎knip.json

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,12 @@
44
"scripts/*.{ts,js}",
55
"app/routes.ts",
66
"vite.config.ts",
7+
"vitest.workspace.ts",
8+
"vitest.config.ts",
79
"app/server/*.ts"
810
],
911
"remix": true,
1012
"lefthook": true,
11-
"project": [
12-
"**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}",
13-
"vite.config.ts"
14-
],
15-
"ignore": [
16-
"app/library/icon/icons/types.ts"
17-
]
18-
}
13+
"project": ["**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}", "vite.config.ts", "vitest.workspace.ts", "vitest.config.ts"],
14+
"ignore": ["app/library/icon/icons/types.ts", "**/*.server.test.{ts,tsx}", "**/*.browser.test.{ts,tsx}"]
15+
}

‎package.json

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,9 @@
1414
"build": "react-router build",
1515
"dev": "react-router dev",
1616
"start": "NODE_ENV=production node ./build/server/index.js",
17-
"test": "vitest run",
18-
"test:ui": "vitest --ui --api 9527",
17+
"test": "vitest run --browser.headless",
18+
"test:ui": "vitest",
1919
"test:cov": "vitest run --coverage",
20-
"test:debug": "jest-preview",
21-
"test:live": "npm-run-all -p test:ui test:debug",
2220
"typecheck": "tsc",
2321
"validate": "pnpm run check && pnpm run typecheck && pnpm run test && pnpm run check:unused",
2422
"check": "biome check .",
@@ -59,16 +57,16 @@
5957
"@types/prompt": "1.1.9",
6058
"@types/react": "19.0.0",
6159
"@types/react-dom": "19.0.1",
62-
"@vitest/coverage-v8": "2.1.5",
63-
"@vitest/ui": "2.1.5",
60+
"@vitest/browser": "2.1.8",
61+
"@vitest/coverage-v8": "2.1.8",
62+
"@vitest/ui": "2.1.8",
6463
"autoprefixer": "10.4.20",
6564
"babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
6665
"chalk": "5.3.0",
6766
"happy-dom": "15.11.6",
68-
"jest-preview": "0.3.1",
6967
"knip": "5.37.2",
7068
"lefthook": "1.8.4",
71-
"npm-run-all": "4.1.5",
69+
"playwright": "1.49.0",
7270
"postcss": "8.4.49",
7371
"prompt": "1.3.0",
7472
"react-router-devtools": "1.0.5",
@@ -79,7 +77,8 @@
7977
"vite-plugin-babel": "1.3.0",
8078
"vite-plugin-icons-spritesheet": "2.2.1",
8179
"vite-tsconfig-paths": "5.1.3",
82-
"vitest": "2.1.5"
80+
"vitest": "2.1.8",
81+
"vitest-browser-react": "0.0.4"
8382
},
8483
"packageManager": "pnpm@9.14.2",
8584
"optionalDependencies": {
@@ -89,4 +88,4 @@
8988
"node": ">=22.11.0",
9089
"pnpm": ">=9.14.2"
9190
}
92-
}
91+
}

0 commit comments

Comments
 (0)