chore: added basic jest testing support

also added an example test for the counter in the components.tsx file to demonstrate functionality of testing configuration. installed all dependencies for testing using --save-dev to make sure they are stored as dev dependencies

ref: N25B-212
This commit is contained in:
JGerla
2025-10-21 22:18:10 +02:00
parent b9ea7737b7
commit cbacf924f9
7 changed files with 4604 additions and 4 deletions

14
jest.config.js Normal file
View File

@@ -0,0 +1,14 @@
export default {
preset: 'ts-jest/presets/default-esm',
testEnvironment: 'jsdom',
extensionsToTreatAsEsm: ['.ts', '.tsx'],
setupFilesAfterEnv: ['<rootDir>/test/setupTests.ts'],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
'\\.(css|scss|sass)$': 'identity-obj-proxy'
},
testMatch: ['<rootDir>/test/*.test.(ts|tsx)'],
transform: {
'^.+\\.(ts|tsx)$': ['ts-jest', { useESM: true, tsconfig: 'tsconfig.jest.json' }]
}
};

4558
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -16,6 +16,10 @@
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.36.0", "@eslint/js": "^9.36.0",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^14.6.1",
"@types/jest": "^30.0.0",
"@types/react": "^19.1.13", "@types/react": "^19.1.13",
"@types/react-dom": "^19.1.9", "@types/react-dom": "^19.1.9",
"@vitejs/plugin-react": "^5.0.3", "@vitejs/plugin-react": "^5.0.3",
@@ -23,6 +27,10 @@
"eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20", "eslint-plugin-react-refresh": "^0.4.20",
"globals": "^16.4.0", "globals": "^16.4.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^30.2.0",
"jest-environment-jsdom": "^30.2.0",
"ts-jest": "^29.4.5",
"typescript": "~5.8.3", "typescript": "~5.8.3",
"typescript-eslint": "^8.44.0", "typescript-eslint": "^8.44.0",
"vite": "^7.1.7" "vite": "^7.1.7"

12
test/components.test.tsx Normal file
View File

@@ -0,0 +1,12 @@
import userEvent from '@testing-library/user-event';
import { render, screen} from '@testing-library/react';
import Counter from '../src/components/components';
describe('Counter component', () => {
test('increments count', async () => {
render(<Counter />);
const button = screen.getByRole('button', { name: /count is 0/i });
await userEvent.click(button);
expect(screen.getByText(/count is 1/i)).toBeInTheDocument();
});
});

2
test/setupTests.ts Normal file
View File

@@ -0,0 +1,2 @@
// Adds jest-dom matchers for React testing library
import '@testing-library/jest-dom';

View File

@@ -24,5 +24,5 @@
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true "noUncheckedSideEffectImports": true
}, },
"include": ["src"] "include": ["src","test"]
} }

12
tsconfig.jest.json Normal file
View File

@@ -0,0 +1,12 @@
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
"verbatimModuleSyntax": false,
"jsx": "react-jsx",
"module": "ESNext",
"target": "ES2022",
"allowJs": true,
"esModuleInterop": true
},
"include": ["test"]
}