https://github.com/andreros/react-testing-environments
Application bundle with the purpose of gathering several pre-configured, ready to use sample applications, each one with a clean working test environment with the various technologies available.
https://github.com/andreros/react-testing-environments
react reactjs testing-environment testing-tools typescript unit-testing
Last synced: 2 months ago
JSON representation
Application bundle with the purpose of gathering several pre-configured, ready to use sample applications, each one with a clean working test environment with the various technologies available.
- Host: GitHub
- URL: https://github.com/andreros/react-testing-environments
- Owner: andreros
- License: unlicense
- Created: 2023-10-25T17:50:10.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-15T23:33:55.000Z (over 2 years ago)
- Last Synced: 2025-10-13T11:37:39.364Z (8 months ago)
- Topics: react, reactjs, testing-environment, testing-tools, typescript, unit-testing
- Language: SCSS
- Homepage:
- Size: 53.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Unit Testing in React
Unit testing in React can be made through the help of different tools. In order to use any of those tools, the application testing environment must be set up. Setting up the testing environment is not always a straight forward task and can be very time consuming.
The React Testing Environments application bundle purpose is to gather several pre-configured, ready to use sample applications, each one with a clean working test environment with the various technologies available.
At the time of writing all applications and test environments configured work. Feel free to reach out if you find any bug.
## Applications base tech stack
- `React` framework (with Typescript) for the overall application development;
- `Typescript` coding language;
- `SASS` style pre-processor to build the needed application styles;
- `Axios` to communicate with the backend API;
- `DotEnv` to load project environment variables;
- `PicniCSS` lightweight CSS framework for UI styling;
## Applications support tools
- `Prettier` for code formatting;
- `Webpack` to bundle the application and serve it in development mode;
## Testing environments
| Application | React | Testing Environment |
| ---------------------- | ----- | ---------------------------- |
| `react-16-jest-enzyme` | 16 | Jest + Enzyme |
| `react-17-jest-enzyme` | 17 | Jest + Enzyme |
| `react-18-jest-enzyme` | 18 | Jest + Enzyme |
| `react-18-jest-rtl` | 18 | Jest + React Testing Library |
| `react-18-cypress` | 18 | Cypress |
| `react-18-playwright` | 18 | Playwright |
## Single application installation and bootstrap
From the project root folder, please choose one application from the table above. Go to the application folder and execute the following commands in a terminal window:
```bash
# example for the `react-16-jest-enzyme`
cd react-16-jest-enzyme
# install the application
npm i
# run the application in development mode
npm start
# or
npm run dev
# run the unit tests suite
npm run test
# run the unit tests suite with coverage report generation
npm run test:coverage
```