Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sarwar-asik/testing-app
Testing with vitest for unit_testing, dom_testing , React testing.
https://github.com/sarwar-asik/testing-app
dom-testing react-testing testing-library unit-testing vitest
Last synced: 1 day ago
JSON representation
Testing with vitest for unit_testing, dom_testing , React testing.
- Host: GitHub
- URL: https://github.com/sarwar-asik/testing-app
- Owner: sarwar-asik
- Created: 2023-11-07T09:08:02.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-18T18:39:25.000Z (about 1 year ago)
- Last Synced: 2023-11-18T21:35:15.657Z (about 1 year ago)
- Topics: dom-testing, react-testing, testing-library, unit-testing, vitest
- Language: JavaScript
- Homepage:
- Size: 11.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# unit-testing
- dom testing
- react app testing
#### Created another testing with separate branch **dom-test & react-testing **
- https://github.com/sarwar-asik/testing-titans/tree/dom-test
- https://github.com/sarwar-asik/testing-titans/tree/react-testing
# Overview of Testing with Vitest
## 1. Unit Testing
### Definition:
Unit testing is a software testing technique where individual units or components of a software are tested in isolation to ensure they perform as expected.
### Key Points:
- Focuses on testing the smallest parts of a software application.
- Tests are written for functions, methods, or modules.
- Aims to validate that each unit of code works correctly in isolation.
## 2. DOM Testing
### Definition:
DOM (Document Object Model) testing is a type of testing that involves validating the behavior and interactions of the HTML document structure.
### Key Points:
- Verifies how the application interacts with the DOM.
- Ensures proper rendering of UI components.
- Tests events, changes in state, and dynamic updates to the DOM.
## 3. React App Testing
### Definition:
React app testing involves testing React components, ensuring they render correctly, handle state and props properly, and respond to user interactions as expected.
### Key Points:
- Utilizes tools like Vitest for testing React applications.
- Involves unit testing of individual React components.
- Tests React component lifecycle methods, state changes, and UI rendering.
## Vitest Testing Framework
### Overview:
Vitest is a lightweight testing framework for JavaScript applications. It supports unit testing, provides a simple syntax, and is suitable for testing various aspects of web applications.
### Key Features:
- Minimal setup and configuration.
- Built-in support for testing in a browser environment.
- Designed for simplicity and ease of use.
## Example Usage:
- js function 'clnNumber.js'
```javascript
// Sample js function
import { transformToNum } from "../transformNum";
export function validateNumber(value) {
return +value;
}
export function cleanNumbers(values) {
const numbers = [];
for (const value of values) {
validateNumber(value);
const number = transformToNum(value);
numbers.push(number);
}
return numbers;
}
```
- testing file in in 'clnNumber.test.js'
```js
import { expect, it } from "vitest";
import { cleanNumbers } from "./numberCheck";
// Sample Vitest testing file
it("array of number provided", () => {
const stringNumber = ["2", "3"];
const result = cleanNumbers(stringNumber);
expect(result[0]).toBeTypeOf("number");
});
```