Skip to content

Commit

Permalink
[Jest setup]: Adding jest setup for the project (#29)
Browse files Browse the repository at this point in the history
Description:
- Add required deps for the jest.
- Added jest.config.js for setting up the jest configuration.
- Added babel.config.js as part of the jest setup.
  • Loading branch information
onemanfighter committed May 7, 2024
1 parent f356fd2 commit c656689
Show file tree
Hide file tree
Showing 9 changed files with 1,240 additions and 110 deletions.
2 changes: 1 addition & 1 deletion .husky/pre-push
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
yarn lint:staged
yarn prettier:staged
yarn test:staged
yarn test
3 changes: 3 additions & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
presets: ['@babel/preset-env'],
};
32 changes: 32 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
module.exports = {
preset: 'ts-jest',
verbose: true,
globals: {
'ts-jest': {
isolatedModules: true,
},
},
roots: ['./'],
testEnvironment: 'jsdom',
collectCoverageFrom: ['src/*.tsx', 'src/**/*.tsx'],
moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
moduleDirectories: ['node_modules', 'src'],
moduleNameMapper: {
'\\.(css|less)$': 'identity-obj-proxy',
'@store/slice': '<rootDir>/src/store/slice',
'@store': '<rootDir>/src/store',
'@components': '<rootDir>/src/components',
'@selectors': '<rootDir>/src/store/selectors',
},
transform: {
'^.+\\.(js|jsx|ts|tsx)$': 'ts-jest',
},
// coverageThreshold: {
// global: {
// branches: 80,
// functions: 80,
// lines: 80,
// statements: -10,
// },
// },
};
5 changes: 2 additions & 3 deletions makefile
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
.PHONY: coverage
coverage:
echo "Running coverage tests"
yarn test -- --coverage --watchAll=false
open -a Firefox http://localhost:3000
serve -s coverage/lcov-report
yarn test:coverage
open -a "Google Chrome" coverage/lcov-report/index.html

.PHONY: branch-clean
branch-clean:
Expand Down
34 changes: 28 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@
"private": true,
"dependencies": {
"@supabase/supabase-js": "^2.39.3",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.73",
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
Expand All @@ -27,7 +23,9 @@
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"test": "jest --config jest.config.js",
"test:coverage": "jest --config jest.config.js --coverage ",
"test:craco": "craco test --silent --watchAll=false",
"test:staged": "craco test --watchAll=false",
"eject": "craco eject",
"prettier:write": "prettier --write .",
Expand Down Expand Up @@ -56,7 +54,18 @@
]
},
"devDependencies": {
"@babel/core": "^7.24.5",
"@babel/preset-env": "^7.24.5",
"@babel/preset-typescript": "^7.24.1",
"@craco/craco": "^7.1.0",
"@craco/types": "^7.1.0",
"@jest/globals": "^29.7.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^29.5.12",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^29.7.0",
"@types/mysql": "^2.15.25",
"babel-plugin-module-resolver": "^5.0.0",
"daisyui": "^4.6.0",
Expand All @@ -66,7 +75,20 @@
"eslint-plugin-n": "^16.6.2",
"eslint-plugin-promise": "^6.1.1",
"husky": "^9.0.11",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"prettier": "3.2.5",
"tailwindcss": "^3.4.1"
"tailwindcss": "^3.4.1",
"ts-jest": "^29.1.2"
},
"jest": {
"collectCoverage": true,
"coverageReporters": [
"lcov"
],
"collectCoverageFrom": [
"src/**/*.ts*"
],
"coverageDirectory": "./"
}
}
8 changes: 3 additions & 5 deletions src/__tests__/App.test.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { render, screen } from '@testing-library/react';
import { render } from '@testing-library/react';
import App from '../App';

test('renders learn react link', () => {
render(<App />);
const { container } = render(<App />);

expect(screen).toMatchSnapshot();
// const linkElement = screen.getByText(/learn react/i);
// expect(linkElement).toBeInTheDocument();
expect(container).toMatchSnapshot();
});
55 changes: 1 addition & 54 deletions src/__tests__/__snapshots__/App.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -1,56 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders learn react link 1`] = `
Object {
"debug": [Function],
"findAllByAltText": [Function],
"findAllByDisplayValue": [Function],
"findAllByLabelText": [Function],
"findAllByPlaceholderText": [Function],
"findAllByRole": [Function],
"findAllByTestId": [Function],
"findAllByText": [Function],
"findAllByTitle": [Function],
"findByAltText": [Function],
"findByDisplayValue": [Function],
"findByLabelText": [Function],
"findByPlaceholderText": [Function],
"findByRole": [Function],
"findByTestId": [Function],
"findByText": [Function],
"findByTitle": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"logTestingPlaygroundURL": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
}
`;
exports[`renders learn react link 1`] = `<div />`;
15 changes: 8 additions & 7 deletions tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,22 @@
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"noEmit": true,
"jsx": "react-jsx",
"incremental": true,
"types": ["jest"],
"noEmit": true
"types": ["jest"]
},
"exclude": ["node_modules"]
"exclude": ["node_modules"],
"include": ["src/**/*", "test/**/*"]
}
Loading

0 comments on commit c656689

Please sign in to comment.