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:
14
jest.config.js
Normal file
14
jest.config.js
Normal 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
4558
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -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
12
test/components.test.tsx
Normal 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
2
test/setupTests.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
// Adds jest-dom matchers for React testing library
|
||||||
|
import '@testing-library/jest-dom';
|
||||||
@@ -24,5 +24,5 @@
|
|||||||
"noFallthroughCasesInSwitch": true,
|
"noFallthroughCasesInSwitch": true,
|
||||||
"noUncheckedSideEffectImports": true
|
"noUncheckedSideEffectImports": true
|
||||||
},
|
},
|
||||||
"include": ["src"]
|
"include": ["src","test"]
|
||||||
}
|
}
|
||||||
|
|||||||
12
tsconfig.jest.json
Normal file
12
tsconfig.jest.json
Normal 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"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user