Forem: Fupeng Wang

React+Vitest to write testable components, common problems record.

Fupeng Wang — Mon, 30 Dec 2024 03:31:46 +0000

Hi there, my name is Fupeng Wang.

I am a senior full-stack engineer, and author of a 17.5k open-source project, PMP. Now I am developing a Notion-style knowledge base
HuashuiAI including AI writing and collaboration, using React Nextjs and Supabase.

In this article, I will share how React + Vitest to write testable components, and record some common problems I encountered

i18n

The HuashuiAI project supports i18n international multilingual development using next-intl, I will share it the next articles.

When conducting component unit testing, it is necessary to simulate the use of next-intl and wrap the target component with a provider.

This outer provider component requires passing in message and locale, as shown in the following figure

DOM Events

You can use fireEvent in @testing-library/react to simulate DOM events https://testing-library.com/docs/dom-testing-library/api-events

For example, click events, change events modify input values, and even simulate selecting files

You can also use waitFor to handle asynchronous processing https://testing-library.com/docs/dom-testing-library/api-async#waitfor

Mock Global Variables

Using vi.stubGlobal in Vitest can simulate global variables and APIs https://vitest.dev/api/vi.html#vi-stubglobal

It is also common to use vi.fn() to simulate functions.

Mock API Request

Vitest cannot directly simulate APIs, but it provides other ways in the documentation https://vitest.dev/guide/mocking#requests

According to the reference document, we need to install MSW first. Please refer to the MSW document for details https://link.juejin.cn/?target=https%3A%2F%2Fmswjs.io%2Fdocs%2Fgetting-started

npm install msw@latest --save-dev

Then, we mock API /api/user and return { errno: 0 }, as shown in the following figure.

Using Zustand

When using Zustand store global variables in React components, it is necessary to initialize these data first before rendering the correct DOM structure.

The code is shown in the following figure. In the beforeAll or beforeEach hook function, simply initialize with setState.

Compatible with Nextjs Router

When some components use useRouter internally, for examples

When testing this component, a very simple test code reported an error at useRouter()

Now we need to install next-router-mock to mock router.

npm install next-router-mock

And then we have to create a vitestSetup.ts to config it, and consider next/router and @/i18n/routing

Github Actions

Unit testing has been configured into the GitHub action process, and code testing is automatically executed every time code is submitted to ensure code quality.

By the way, I am looking for an international job opportunity, if you have a chance, welcome to connect me on my Github profile.

How can VoidZero be commercialized?

Fupeng Wang — Mon, 23 Dec 2024 07:08:30 +0000

Hi there, my name is Fupeng Wang.

Background

In October of this year, Vue author Evan You announced the establishment of VoiceZero, aiming to solve problems such as fragmented JS toolchains, incompatibility, and low efficiency. VoiceZero has received millions of dollars in investment and now has products under development, Rolldown and Oxc.

For this reason, two weeks ago I wrote an article What is Evan You doing by creating VoidZero, and what are the issues with JS toolchains? Analyzed the current situation and problems of front-end JS toolchains.

But there is another question that everyone has been discussing, a very practical one: how can VoidZero make a profit? Investment inevitably requires returns, and capital is profit driven.

How can we make money? Vite can't be paid to use it, can we. Relying on community sponsorship? Pull it down, this basic tool relies on sponsorship and can refer to the story of the core-js author.

Author's explanation

Someone replied below the article just now, citing the words of Vue author Evan You himself.

End to end services for enterprises......
Differentiated licensing model......
Product matrix and traffic guidance......
Ecosystem building and partnership relationships......

I also found a tweet from the author, which was also quite vague. I completely understand this. Talking about money hurts emotions, talking about technology in a high-profile manner, and making money requires being low-key.

All of these are correct, but saying it means not saying anything, and after reading it, I don't know anything. Just like how Web3 provides a formal explanation of ten thousand words and a layman's explanation of virtual currency.

What things are suitable for payment?

Firstly, tools such as Vite and SWC cannot be used for a fee. There are too many products of the same type, so if you charge, everyone won't need to use them. Of course, being free does not mean it has no value. With more users, there is a great potential for natural value.

There are paid tools available. For example, the Tiptap rich text editor is free to use, but some advanced features and APIs are paid for. For example, the cursor editor heavily relies on AI capabilities, so it requires payment for use.

Most AI related development tools and services are paid for, such as v0 and bolt, as well as Notion AI. But these are not so closely related to Vite and VoidZero.

In the fields of research and technology, the most common form of payment is online services such as servers, databases, storage, CDN, Edge. There are also some popular services, such as login verification, payment, email notifications, monitoring alarms, content review, etc.

Large platforms such as Amazon,Google Cloud, Microsoft Azure, etc. There are also many small and medium-sized platforms, such as Vercel Supabase, Netlify, etc.

Deno received a $20M investment in 2022, how will it make a profit? It developed Deno Deploy, focusing on the Edge advantage, ultimately aiming to make money through online services.

As long as there is a deploy entry point, the subsequent database, storage, and CDN can be discussed. You can choose to integrate with other service providers or develop your own.

But what about those small and medium-sized platforms without traffic? Is it possible to invest in Vite as an entry point? Vite has a very large user base, which is definitely a great idea.

Analyze the investors of VoiceZero

Look at VoidZero's investors, StackBlitz Supabase Sentry Netlify Strikingly Prisma Resend, they are all fee based projects, covering various fields such as server, deployment, databases, third-party services, online monitoring, etc.

They have competitors, how can they better acquire users and cultivate user habits? Vite has a massive user base, and as long as guidance is done well, it will bring huge traffic, which in turn will lead to a large number of paid upgrades.

For example, if I want to integrate a service for sending emails in the project and use the Vite command to integrate Resend, do you want to use it or manually configure it yourself? Do you want to do project statistics and monitoring? Vite can integrate Sentry with just one click. Do you want to use it or do you need to configure other platforms yourself?

For experienced coders, they may be able to configure these issues themselves, but for batches of newcomers, they will definitely choose the most direct way first, and gradually cultivate user habits.

I guess that in the next 2 years, Vite or VoiceZero will definitely integrate deployment services, or even develop their own deployment services. They will earn intermediary fees.

I really hope this model can work and explore a profitable path for open source projects!

The end

There will always be problems, needs, and opportunities in this world.

I remember when Gates said that 64MB of memory on a PC was perfect, and Jobs said that a 4-inch phone screen was perfect. Later on, there were also revolutionary changes.

Be a thoughtful person, keep observing the world, broaden your horizons, life is about turmoil.

By the way, I am looking for an international job opportunity, if you have a chance, welcome to connect me on my Github profile.

What is Evan You doing by creating VoidZero, and what are the issues with JS toolchains?

Fupeng Wang — Tue, 17 Dec 2024 07:59:25 +0000

Hi there, my name is Fupeng Wang.

Evan You and VoidZero

Two months ago, Vue and Vite author Evan You announced the establishment of VoiceZero company and received millions of dollars in investment.

VoidZero will be based on Vite and develop two major tools, Rolldown and Oxc, to unify the front-end JS toolchain. Resolve issues such as fragmentation, incompatibility, and low efficiency.

The VoidZero core tool is developed in Rust language, with high running efficiency and fast speed.

What are the issues with JS toolchains

The JS toolchain mainly includes processes such as semantic analysis, transformer, linter, transformer, minifier, bounder, etc.

How are we currently using these types of tools? What tools are currently available? What is the relationship between them? Are they really inefficient and fragmented? Let's introduce them one by one below.

Note that their relationship is somewhat chaotic, with some being able to compile and package, and having a lot of overlapping functions, so there is no need to forcefully classify and compare them.

JS runtime

The so-called runtime refers to the runtime environment of a language. If there is no runtime, then a language is just a string or string file that cannot be parsed and run.

Nodejs is the most common JS runtime, which is stable, mature, and has a very rich ecosystem.
Deno is a JS runtime developed in recent years, focusing on TS support and network security. It received a $20M investment in the first two years and recently released Deno 2.0, which is currently developing rapidly
Bun JS runtime， Focus on performance and all-in-one

// Nodejs Deno 或 Bun，都是写 JS 代码
const server = Bun.serve({
  port: 3000,
  fetch(request) {
    return new Response("Welcome to Bun!");
  },
});

console.log(`Listening on localhost:${server.port}`);

Note: The JS runtime is not a part of the JS toolchain, it is just the most basic capability, but understanding these tools and terms can help distinguish them from the JS toolchain. You may not have used it, but you need to know its existence and what it does.

Parser/Compiler

Web front-end development needs to consider compatibility with various browsers, as modern browsers are not yet able to directly run TS JSX and the latest ES code.

So, we need to convert TS JSX ES and other code in the development environment into JS code that can be executed by the browser, usually ES5.

Babel was one of the first to do this job, developed using JS, with a rich ecosystem and plugins, and has long been integrated into packaging tools such as webpack rollup.

But Babel is developed in JS, so its running efficiency is relatively low. Moreover, Babel requires manual configuration when compiling TS JSX, which is quite cumbersome.

SWC is a JS compiler developed in Rust language, which is 20-70 times faster than Babel (on different CPUs), and natively supports TS and JSX syntax, aiming to replace Babel. Vite uses SWC internally.

Rspack is developed using the Rust language, but it is not just a JS compiler. It is a comprehensive packaging tool with high efficiency.

Like Rspack, ESBullid is developed using the Go language and is a comprehensive packaging tool that includes a JS compiler, making it highly efficient.

Linter & Formatter

The commonly used ones in this section are ESLint and Prettier, but there are also some confusion in their usage

There are many configuration standards for ESLint (such as Recommended, Airbnb, Google, StandardJS, etc.), and everyone may use them differently. Different projects may also have different configurations
ESLint and Prettier have some duplicated functions, making it difficult to choose when using them, and there may be duplicate configurations

Minifier

UglifyJS was one of the first used to compress JS code, and now its download volume is also very large.

Terser is developed based on the UglifyJS source code, supporting ES6 new syntax and optimizing tree shaking.

However, new tools such as SWC and esbulid now also support JS code compression, and their execution efficiency is higher. After all, Rust or Go inherently have much higher execution efficiency than JS.

Boundler

Packagers are the ones we most frequently come into contact with, such as Webpack Vite and Parcel. The latter may not be commonly used, but it is also a well-established tool.

Vite uses SWC as an interpreter, which is highly efficient. Use esbulid for packaging in the development environment, and rollup for packaging in the production environment.

Meanwhile, esbulid (developed in Go language, as introduced earlier) and rollup can also be used separately as packaging tools, and many third-party JS plugins are packaged using rollup.

Turbopack is a JS packaging tool developed by Vercel using Rust for Next.js projects, and can also be used independently.

Rspack is a JS packaging tool developed using Rust (along with a JS compiler), which can replace webpack and is very fast.

SWC is also developing its own packaging tool swcpack - with so many, do you think it's messy? Is it fragmented?

Why use Rust

You may be curious, why do so many tools need to be developed in Rust language? There are two main points

Rust is a compiled language that can be compiled into native code and run directly, with performance comparable to C++
Rust memory management is safer, while C++ memory management is more prone to bugs

The End

Looking back at three issues with JS toolchains

Fragmentation: This is too obvious, there are a lot of repetitive tools in various fields, especially boulders
Incompatibility: Old tools have compatibility with new syntax, especially TS JSX, and require excessive configuration
Low efficiency: This is also very obvious. In the tool field, JS cannot do as well as Rust, and it is only a matter of time before it is eliminated (don't panic: this is only the tool field, and the application field is still JS and TS)

So, Vue author Evan You has a sharp eye, looks very accurately, and can directly point to problems. Moreover, he has a strong advantage and grip in this part, which is Vite. Vite now has a large number of users and can serve as a good entry point.

When web frameworks such as Vue and single tools such as Vite encounter bottlenecks in their development, Evan can break out of this circle, discover higher-level problems, and be able to execute them on the ground. This is something we should learn from.

Finally, with so much investment, VoidZero needs a return on investment. How will it be commercialized in the future? It's impossible to charge Vite directly, so how can we make money?

Follow me, I will analyze in detail in the next section. This will be more valuable than technology and code.

By the way, I am looking for an international job opportunity, if you have a chance, welcome to connect me on my Github profile.

React + dnd-kit, implement tree-list drag and drop sortable

Fupeng Wang — Tue, 10 Dec 2024 01:27:27 +0000

Hi there, my name is Fupeng Wang.

In this article, I will share how to implement tree-list drag and drop sortable by React and dnd-kit. The source code link is at the bottom of this article.

Dnd-kit and Sortable component

Dnd-kit is a common drag-drop tool in the React ecosystem, and it supports sortable by default.

    <DndContext 
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
    >
      <SortableContext 
        items={items}
        strategy={verticalListSortingStrategy}
      >
        {items.map(id => <SortableItem key={id} id={id} />)}
      </SortableContext>
    </DndContext>

But it can only support the one-level list. If we want to implement a multi-level nested list (or tree), we have to customize it.

Define state date structure

Modern front-end frameworks such as React Vue are data-driven views, so defining data structures first and then considering UI rendering.

The most common data structure definition for multi-level nested lists (trees) is as follows, and virtual DOM vnode is also defined in this way.

const defaultItems = [
  { id: 'A', children: [] },
  {
    id: 'B',
    children: [
      { id: 'B1', children: [] },
      {
        id: 'B2',
        children: [
          { id: 'B2a', children: [] },
          { id: 'B2b', children: [] },
        ],
      },
    ],
  },
  { id: 'C', children: [] },
  {
    id: 'D',
    children: [
      { id: 'D1', children: [] },
      { id: 'D2', children: [] },
    ],
  },
  { id: 'E', children: [] },
]

Multi-level nested `SortableContext` is not feasible

Because the state data structure is nested, the first thing that comes to my mind is to nest and render the UI structure together.

Firstly, nest <SortableItem> within <SortableContext> , which is the same method used for one-layer lists.

Then, continue nesting the subordinate <SortableContext> in <SortableItem> to display children.

The running effect is as follows. The problem is that drag and drop sorting is allowed within the same level, but cross level sorting is not possible because it is not a context - which is reasonable

Multi level conversion to a single level is feasible

Since nesting is not feasible, it is necessary to convert multiple levels into the single level.

But it is necessary to add the ancestorsIds attribute for each item, firstly to display the depth of the hierarchy, and secondly to know what parent nodes it has.

interface IItem {
  id: string
  ancestorIds?: string[]
  children?: IItem[]
}

function flatten(items: IItem[]): IItem[] {
  return items.reduce<IItem[]>((acc, item) => {
    acc.push(item)
    if (item.children) {
      const children = item.children.map((i) => ({
        ...i,
        ancestorIds: [...(item.ancestorIds || []), item.id], // add ancestorIds
      }))
      acc.push(...flatten(children))
    }
    return acc
  }, [])
}

The rendering effect after conversion is as follows, and you can now drag and sort it. However, it will not take effect until the state sorting is modified.

In addition, we can also determine whether it can be moved through the hierarchical relationship of ancestorsIDs. The parent node cannot be moved to its child nodes, otherwise the loop will be dead.

For example, in the above figure, if we want to drag B2 to the position of B2a, we will find that the ancestorsIDs of B2a contain B2. This is not possible because you cannot drag an item to its own subordinate.

Modify state data

For ease of operation, the data is placed in the Zustand global store.

Dnd-kit refers to the dragged element as an activeItem and the placed target location as an overItem. So modifying state data means moving activeItem to the position of overItem.

If it is a single level, Dnd-kit provides a method arrayMove that can be directly modified. The doc link https://docs.dndkit.com/presets/sortable

But in multi-level nested lists (trees), you need to implement it yourself, which is a bit troublesome. The core code is here, and you can download the source code (at the end of the article) for reference.

Encountered a problem

As shown in the figure below, when dragging A under B, A will move to the bottom of B as a whole, not inside B.

To solve this problem, it is necessary to determine whether there are any child elements of B after B. If so, assign overItem to its child elements

Then insert the current active element into the first element of items.

The end

The source code link is here https://github.com/wangfupeng1988/react-dnd-sortable-demo

By the way, I am looking for an international job opportunity, if you have a chance, welcome to connect me on my Github profile.

Forem: Fupeng Wang

React+Vitest to write testable components, common problems record.

i18n

DOM Events

Mock Global Variables

Mock API Request

Using Zustand

Compatible with Nextjs Router

Github Actions

How can VoidZero be commercialized?

Background

Author's explanation

What things are suitable for payment?

Analyze the investors of VoiceZero

The end

What is Evan You doing by creating VoidZero, and what are the issues with JS toolchains?

Evan You and VoidZero

What are the issues with JS toolchains

JS runtime

Parser/Compiler

Linter & Formatter

Minifier

Boundler

Why use Rust

The End

React + dnd-kit, implement tree-list drag and drop sortable

Dnd-kit and Sortable component

Define state date structure

Multi-level nested SortableContext is not feasible

Multi level conversion to a single level is feasible

Modify state data

Encountered a problem

The end

Multi-level nested `SortableContext` is not feasible