📝 LobeChat 技术运营 - LobeChat是一个Next.js框架构建的AI会话应用，使用了Ant Design和lobe-ui作为基础组件库，zustand作为状态管理库，swr用于数据获取，i18next实现多语言支持，antd-style作为CSS-in-JS库，vitest用于单元测试。文件夹目录分为app、components、config、const、features、hooks、layout、locales、services、store、types和utils。

LobeChat 的测试策略包括单元测试、集成测试和端到端测试。下面是每种测试的详细说明：

单元测试

单元测试用于测试应用中的独立单元（如组件、函数、工具函数等）的功能。我们使用 vitest 进行单元测试。

要运行单元测试，可以使用以下命令：

npm run test

这将运行所有的单元测试，并生成测试报告。

我们鼓励开发者在编写代码时，同时编写对应的单元测试，以确保代码的质量和稳定性。

集成测试

集成测试用于测试应用中不同模块之间的交互和整体功能。我们建议使用自动化测试工具（如 Cypress、Jest 等）进行集成测试。

在 LobeChat 中，集成测试可以包括以下内容：

• 测试不同页面之间的导航和路由是否正常工作。
• 测试组件之间的交互和通信是否正确。
• 测试应用与后端服务的接口是否正常。

我们鼓励开发者编写集成测试用例，并在开发过程中频繁运行这些测试，以确保应用的整体功能正常。

端到端测试

端到端测试用于测试应用在真实环境中的功能和性能。它模拟用户的真实操作，并验证应用在不同场景下的表现。

在 LobeChat 中，可以使用自动化测试工具（如 Cypress）进行端到端测试。您可以编写测试脚本，模拟用户在应用中的各种操作，如点击按钮、输入文本等。

要运行端到端测试，可以使用以下命令：

npm run test:e2e

这将运行所有的端到端测试，并生成测试报告。

我们建议在发布之前运行端到端测试，以确保应用在真实环境中的稳定性和可靠性。

请注意，端到端测试可能需要较长时间来完成，因此可以选择在持续集成（CI）工具中运行这些测试，以便及时发现问题并解决。

总结起来，我们建议开发者在编写代码时编写相应的单元测试，并在开发过程中频繁运行这些测试。同时，也应编写集成测试和端到端测试用例，并在发布之前运行这些测试，以确保应用的整体功能正常。

LobeChat 开发者上手指南

环境准备

在开始开发 LobeChat 之前，你需要确保你的开发环境已经安装了以下依赖：

• Node.js (v14.0 或更高版本)
• npm (v6.0 或更高版本)

获取源代码

你可以通过 git 克隆 LobeChat 的源代码到你的本地环境：

git clone https://github.com/lobehub/LobeChat.git
cd LobeChat

然后，使用 npm 安装项目依赖：

npm install

启动开发服务

在完成依赖安装后，你可以使用以下命令启动开发服务：

npm run dev

这将会启动一个运行在 3010 端口的开发服务器。

测试策略

我们使用 vitest 进行单元测试。你可以使用以下命令运行所有的单元测试：

npm run test

如果你需要更新测试用例，你可以使用以下命令：

npm run test:update

我们使用 Jest 提供的代码覆盖率工具来检查我们的测试覆盖率。你可以使用以下命令生成覆盖率报告：

npm run test:coverage

对于集成测试和端到端测试，我们建议使用 Cypress 或 Puppeteer 这样的工具进行自动化测试。你需要编写相应的测试脚本并在你的 CI/CD 流程中进行运行。

代码质量检查

我们使用 ESLint 和 Stylelint 来做代码质量检查。你可以使用以下命令进行代码检查：

npm run lint

如果你需要自动修复一些简单的代码问题，你可以使用以下命令：

npm run lint:ts
npm run lint:style

构建项目

你可以使用以下命令来构建你的项目：

npm run build

这将会在 .next 目录下生成构建结果。

更多信息

你可以查阅我们的 GitHub 来获取更多的项目信息和开发文档。

LobeChat 的测试说明指南如下：

1. 单元测试

单元测试是针对应用中的最小可测试单元进行的测试，通常是针对函数、组件或模块进行的测试。在 LobeChat 中，我们使用 vitest 进行单元测试。

编写测试用例

在编写单元测试之前，您需要创建一个与被测试文件相同的目录，并将测试文件命名为 <filename>.test.ts。例如，如果要测试 src/utils/formatDate.ts 文件，测试文件应命名为 src/utils/formatDate.test.ts。

在测试文件中，您可以使用 describe 和 it 函数来组织和编写测试用例。describe 函数用于创建测试套件，it 函数用于编写具体的测试用例。

import { formatNumber } from './formatNumber';

describe('formatNumber', () => {
  it('should format number with comma separator', () => {
    const result = formatNumber(1000);
    expect(result).toBe('1,000');
  });

  it('should return the same number if it is less than 1000', () => {
    const result = formatNumber(500);
    expect(result).toBe('500');
  });
});

在测试用例中，您可以使用 expect 函数来断言测试结果是否符合预期。expect 函数可以与各种匹配器（matchers）一起使用，例如 toBe、toEqual、toBeTruthy 等。

运行单元测试

通过运行以下命令来执行单元测试：

npm run test

这将运行所有的单元测试，并输出测试结果。

2. 集成测试

集成测试是用于测试多个组件、模块或服务之间的交互和集成的测试。在 LobeChat 中，我们使用集成测试来确保各个功能模块的协同工作正常。

编写集成测试

集成测试可以使用与单元测试类似的方式进行编写，但是测试的范围更广，涵盖了多个组件或模块的交互。

您可以创建一个与被测试模块相关的测试文件，并使用 describe 和 it 函数来编写测试用例。

import { render, screen } from '@testing-library/react';
import { AgentList } from './AgentList';

describe('AgentList', () => {
  it('should render agent list correctly', () => {
    render(<AgentList />);
    const agentElement = screen.getByText('Agent List');
    expect(agentElement).toBeInTheDocument();
  });
});

在集成测试中，您可以使用 render 函数来渲染组件，并使用 screen 对象来获取组件中的元素，并进行断言。

运行集成测试

通过运行以下命令来执行集成测试：

npm run test

这将运行所有的集成测试，并输出测试结果。

3. 端到端测试

端到端测试是对整个应用进行测试，从用户界面的角度模拟用户操作和交互。在 LobeChat 中，我们使用工具如 Cypress 来进行端到端测试。

编写端到端测试

在编写端到端测试之前，您需要创建一个 cypress 目录，并在其中创建测试文件。您可以使用 Cypress 提供的 API 来编写测试用例。

describe('LobeChat', () => {
  it('should display login page', () => {
    cy.visit('/');
    cy.contains('Login').should('be.visible');
  });

  it('should login with valid credentials', () => {
    cy.visit('/');
    cy.get('input[name="username"]').type('admin');
    cy.get('input[name="password"]').type('password');
    cy.contains('Login').click();
    cy.contains('Welcome, admin').should('be.visible');
  });
});

在端到端测试中，您可以使用 Cypress 提供的命令来模拟用户操作，例如 visit、get、type、click 等。

运行端到端测试

通过运行以下命令来执行端到端测试：

npx cypress open

这将打开 Cypress 的测试运行器，并显示可用的测试文件。您可以选择要运行的测试文件，并查看测试结果。

4. 测试策略

为了编写有效的测试用例，您可以考虑以下测试策略：

• 边界条件测试：测试输入的边界条件，例如最小值、最大值、空值等。
• 异常情况测试：测试处理异常情况的代码，例如错误处理、异常情况下的回退等。
• 功能测试：测试应用的各个功能模块是否正常工作，包括用户交互、数据处理等。
• 兼容性测试：测试应用在不同浏览器和设备上的兼容性。
• 性能测试：测试应用在不同负载下的性能表现，例如响应时间、资源占用等。

同时，请确保您的测试用例具有良好的覆盖率，覆盖到应用中的关键代码和功能。

通过合理编写和执行单元测试、集成测试和端到端测试，您可以提高应用的质量和稳定性，并及时发现和修复潜在的问题。

Share from 🤯 LobeChat - 2023-10-15