總結

在文件的最后，写着这样的内容。

对于更复杂的测试，例如组件或端到端测试，建议使用分开的测试文件。

建议在更复杂的测试（如组件测试和端到端测试）中，使用不同的测试文件。

由于公式建议，我决定不在Web应用程序中采用原地测试。

如果一开始就把官方文件读到最后就好了…
这之后的内容没什么价值可言。

这篇文章的主题

在上一篇文章中，我写了一个关于在Next.js13App路由器中编写vites测试代码的文章。

基本的 Next.js 13 应用程序路由器中 vitest 测试文件的写法（从模板开始的测试驱动开发 Next.js 13 应用程序路由器、 vitest、Storybook、Plop）- Qiita

 

我想把这篇文章重新写为「In-source测试的Vitest」。

「In-source testing」是 vitest 的一种功能，它允许将测试代码写入代码内部。

调查 vitest 的内部测试

使用工具

下一个版本的Next.js应用程序路由器
vitest
故事书
Plop

Windows
VSCode (Visual Studio Code)

介绍工具

Next.js 13 应用程序路由

React 框架

Vercel推出的Next.js——React框架
https://nextjs.org/

维特斯

使用Vite的测试框架。

Vitest | 一个由Vite强力驱动的快速单元测试框架

 

---

环境构建

Next.js 13 应用程序路由器

安装

使用 npx create-next-app 命令创建一个名为 inSourceTesting 的 Next.js 应用程序。

选择

全部Yes

确认动作

运行 npm dev

---

安装vitest

安装

使用npm安装@vitejs/plugin-react

只需提供一种选项来将以下内容以中文进行本地化：
使用-D标志安装此库时无法识别。

npm i -D @testing-library/jest-dom @testing-library/react @testing-library/user-event @vitest/ui jsdom vitest

用npm安装 -D @testing-library/jest-dom @testing-library/react @testing-library/user-event @vitest/ui jsdom vitest

安装辅助工具

即时同步

Typesync可以查找并下载TypeScript的类型定义。
它会自动根据package.json文件中的内容，添加所需的缺失类型定义包。

安装

使用npm安装 typesync 的开发依赖（npm i -D typesync）。

使用方法

运行npx typesync

VSCode插件

Vitest – 微软 Visual Studio Marketplace

 

为了使用这个扩展功能，需要先运行 npm run test（在vitest的观察模式下）。

在VSCode的编辑器界面中，行的左侧显示着绿色或红色的图标。
左键点击以运行测试。
右键点击以打开菜单。

---

进行vitest的配置

添加脚本

    "test": "vitest",
    "test:ui": "vitest --ui",
    "coverage": "vitest run --coverage",

每当将源代码保存为watch格式时，test会运行。
test：ui会在浏览器中显示测试结果。

vitest的配置设置

点击 vitest.config.ts

/// <reference types="vitest" />
import react from "@vitejs/plugin-react";
import { defineConfig } from "vitest/config";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    include: ["src/**/*.test.{js,ts,jsx,tsx}"],
  },
});

只有位于src下的文件夹中的测试文件有效。

样例01 基础：简单的客户端组件及其测试代码。

创建一个名为src/app/client的文件夹
在src/app/client中创建一个名为page.tsx的文件
在src/app/client中创建一个名为page.test.tsx的文件

"use client"

import React from "react"

export default function ClientComponent() {
  return <h1>Client Component</h1>
}

import { render, screen } from "@testing-library/react"
import React from "react"
import { expect, test } from "vitest"

import ClientComponent from "./page"

test("App Router: Works with Client Components", () => {
  render(<ClientComponent />)
  expect(
    screen.getByRole("heading", { level: 1, name: "Client Component" })
  ).toBeDefined()
})

测试操作确认

运行npm的测试

在浏览器中显示

import ClientComponent from "./client/page";

export default function Home() {
  return (
    <main>
      <h1>Welcome to VNS.BLUE</h1>
      <ClientComponent />
    </main>
  );
}

确认行动

运行开发环境下的npm

我可以使用这个来测试和在浏览器上显示。

---

vitest 的源代码测试

接下来，我希望把创建的测试嵌入到代码中。

代码内嵌测试机制。

在Vitest中，使用`import.meta.vitest`来实现。

import.meta.vitest 的类型定义在 tsconfig 的 types 选项中传递的 vitest/importMeta 上。

用於測試描述的API應該從import.meta.vitest中獲取，而不是使用常規的靜態導入。
如果import.meta.vitest未被定義，則整個if語句將被忽略，測試相關的代碼將在構建應用時完全消失。

因此，在开发时，只有测试代码才会生效。

当代码和测试文件合在一起时，往往会变得很庞大，
这种情况下，我们应进行重构以分离关注点。

编写此代码和测试时，请在编辑器中将同一文件拆分成多个屏幕，并进行编辑。

设定

我要修改vitest.config.ts文件。

/// <reference types="vitest" />
import react from "@vitejs/plugin-react";
import { defineConfig } from "vitest/config";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    "import.meta.vitest": false,
  },
  test: {
    globals: true,
    environment: "jsdom",
    include: ["src/**/*.{js,ts,jsx,tsx}"],
  },
});

包括：[“src/**/*.{js,ts,jsx,tsx}”]。

在这个部分的设置中，以前的测试文件是.test.tsx等，但这次我们将测试代码迁移到了page.tsx中，所以需要调整文件名的设置。

如果在代码中没有测试代码，就会出现“在文件中找不到测试用例”的错误判断。

通过将 import.meta.vitest 设置为 false，可以在构建时排除测试代码。

    ],
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["vitest/importMeta"]
  },

为了获取TypeScript支持，

“类型”：[“vitest/importMeta”]

在此处添加类型信息。

In-Source 的测试代码

将测试代码嵌入到先前编写的组件中。

import.meta.vitest是测试运行器提供的对象，它具有it和expect方法。

"use client";

import React from "react";
import { render, screen } from "@testing-library/react";
import { expect, test } from "vitest";

export default function ClientComponent() {
  return <h1>Client Component</h1>;
}

if (import.meta.vitest) {
  test("App Router: Works with Client Components", () => {
    render(<ClientComponent />);
    expect(
      screen.getByRole("heading", { level: 1, name: "Client Component" })
    ).toBeDefined();
  });
}

如果将测试代码嵌入组件的代码中的话

src\app\client\page.test.tsx 的原文需要用中文进行改写：

我要删除这个文件。

由于将”src/**/*.{js,ts,jsx,tsx}”列入测试文件的目标，因此具有这些文件扩展名的文件都会被判断为包含测试文件。

因为Next.js的文件名有固定的规则，所以无法更改，因此需要相应地进行适配。

因为我只想在测试时使用import语句，所以我们也需要处理这个问题。

内部测试 | 指南 | Vitest

 

在Next.js中的文件约定

构建你的应用程序：路由 | Next.js
https://nextjs.org/docs/app/building-your-application/routing

在过去，我们可以使用 “*.test.拡張子” 这样的模式来对测试文件进行分类。
由于Next.js有文件约定，因此文件名是固定的。

假如或者比方说，

将名为page.tsx的In-Source Testing代码更名为page.text.tsx

404
找不到此页面。

对策是逐个指定。

强制在所有文件中编写测试

只将测试集中在组件上

放弃。<<新>>

最后我们回到结论。

---

请提供参考的网址。

Vitest | 由Vite驱动的高速单元测试框架

 

特征 | 指南 | Vitest

 

试用了Vitest的In-source Testing | Marginalia