https://github.com/marcelo-earth/jest-notes

🧪📄 Unit Testing with React course notes
https://github.com/marcelo-earth/jest-notes

jest note-taking notes unit-testing

Last synced: 5 days ago
JSON representation

🧪📄 Unit Testing with React course notes

• Host: GitHub
• URL: https://github.com/marcelo-earth/jest-notes
• Owner: marcelo-earth
• Created: 2021-12-25T21:04:31.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-08-20T14:27:59.000Z (over 2 years ago)
• Last Synced: 2025-02-04T21:44:48.158Z (10 days ago)
• Topics: jest, note-taking, notes, unit-testing
• Homepage:
• Size: 106 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🧪 Testing Notes

## 📚 Libraries studied

- Jest

- React Testing Library

- Enzyme

## ✍ About this repository

### 🌌 Purpose of this repository

I consider Unit Testing an important tool to ensure the quality of software functionalities. As a FrontEnd engineer I learned to write tests to check functions, or files. At this moment, all the projects, applications or software products that I have developed are about to incorporate, (or already incorporate) a space dedicated to unit testing with Jest within the file structure.

### 📎 About this notes

This repository is part of the notes that I have written when studying a topic.

If you want more of this content, please follow me on [GitHub](https://github.com/360macky) or [Twitter](https://twitter.com/360macky).

The text is licensed by MIT, the images may be subject to copyright.

## 👀 How to configure the testings?

Using setupFilesAfterEnv settings in package.json.

### How to use setupFilesAfterEnv?

Adding this property to the jest property in package.json, you can specify the path of the file that must be executed to set up the testing framework.

```javascript

    "setupFilesAfterEnv": [

      "/src/__test__/setupTest.js"

    ],

```

## 💥 How to set up Jest for Web?

Modify package.json with:

```javascript

    "testEnvironment": "jsdom"

```

I found this good explaination:

> By default, jest uses the node testEnvironment. This essentially makes any tests meant for a browser environment invalid.. jsdom is an implementation of a browser environment, which supports these types of UI tests.

## 🦾 What are Mocks?

Mocks are simulating functions that our app makes.

## 👨‍🚀 About Enzyme/React

### Where use `mount`, `shallow` or `render`?

- `mount()`: When you need the DOM.

- `shallow()`: When you need something in particular of the component (without the DOM).

- `render()`: When you need to analyze the resulting HTML structure.

## ✨ Jest Options

### How can I watch every test suite in the terminal?

Set verbose property to `true` inside `jest` property inside `package.json` file.

```javascript

"verbose": true,

```