⬆️ Update Icons: Playwright, Puppeteer, StoryBook, Testing-Library, React-Query, Recoil

[osohyun0224]

Intro.

Hello, I am a web Frontend developer. I have been using skill-icons to write my GitHub README. Before contributing to this code, I want to express my gratitude for developing such an open-source project. Thanks to you, my project's README is becoming cleaner and more organized. There are some libraries and frameworks I commonly use in frontend development that are not included in this open-source project, so I have opened this Pull Request to contribute directly.

List of Contents

• Testing tools commonly used in frontend development
• Libraries commonly used in frontend development
• Etc...(Figma)

Testing Tools

1. Playwright(⭐️⭐️⭐️)

What?

An end-to-end testing tool that allows you to test all modern rendering engines, including Chromium, WebKit, and Firefox, using a single API.

It is gaining popularity due to its extended features such as auto-waiting, retry-ability, support for testing all modern rendering engines, improved test speed (through the reuse of browser contexts, parallel testing, etc.), convenient debugging tools, and support for various languages.

closes issue(s): #890 , #811 , #773 , #520 , #401 , #392

2. Puppeteer

What?

Puppeteer is fundamentally based on Chromium and provides a library that enables the launching of a virtual browser similar to the environment users interact with, through the DevTools protocol, allowing it to run in the background.

closes issue(s): #772

3. StoryBook(⭐️)

What?

Storybook is a tool that supports a component-level UI development environment. With Storybook, you can proceed with component-level UI development independently of the actual web application environment. Additionally, it can also be used as a documentation tool for components.

closes issue(s): #392, #342

4. Testing-Library

What?

React Testing Library is a collection of tools that facilitate the testing of React components without relying on the details of their implementation. This approach makes refactoring easier and enables best practices for accessibility.

closes issue(s): none.

Libraries

5. React-Query (⭐️)

What?

React Query is a library that supports fetching, caching, and synchronization with server data. It eliminates the need for complex and verbose code, allowing for simple and intuitive API usage within React Components.

closes issue(s): #671, #268

6. Recoil

What?

Recoil is one of the many global state management libraries available for React projects. Using Recoil, you can create a data-flow graph that flows from atoms (shared states) through selectors (pure functions) to React components. Here, atoms are units of state that components can subscribe to, while selectors transform this state synchronously or asynchronously.

closes issue(s): #267

---

Etc

This is a Figma file containing images of the icons I have worked on.

Icon Images Figma File

[Zakrok09]

I am quite in favor of this request, since Playwright is gaining a lot of popularity, together with testing-library.

Edit: also testing-library's approach for writing component tests is a very interesting read, I recommend Kent Dodds' article on the topic of testing implementation details

[moutinhofuturedev]

I am also in favor of this request, mainly because of the use of Storybook, which is an excellent tool for the frontend, as is React Query.