sway-farm前端自动化测试：Jest与React Testing Library实践

sway-farm前端自动化测试：Jest与React Testing Library实践

【免费下载链接】sway-farm 项目地址: https://gitcode.com/GitHub_Trending/sw/sway-farm

你还在手动测试农场游戏的植物生长状态吗？每次修改代码后反复点击种植、等待成熟的过程是否让你抓狂？本文将带你用Jest与React Testing Library构建前端自动化测试体系，彻底解放双手！读完你将掌握：组件渲染测试、交互逻辑验证、异步状态测试三大核心技能，让你的农场游戏迭代更放心。

测试环境搭建

首先需要安装测试依赖，打开终端执行以下命令：

cd frontend && npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event @types/jest jest-environment-jsdom

创建Jest配置文件jest.config.js：

module.exports = {
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
}

在src目录下创建setupTests.ts：

import '@testing-library/jest-dom';

组件测试实战

GardenTile组件测试

GardenTile组件负责显示植物生长状态，我们需要测试它在不同生长阶段的渲染情况。创建测试文件src/components/GardenTile.test.tsx：

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

describe('GardenTile', () => {
  const mockPosition = { x: 0, y: 0, z: 0 };
  
  test('renders seed texture when tileState < 4', () => {
    render(<GardenTile position={mockPosition} state={{ time_planted: 123 }} updateNum={1} />);
    expect(screen.getByTestId('seed-texture')).toBeInTheDocument();
  });
  
  test('renders final texture when tileState is 20', () => {
    render(<GardenTile position={mockPosition} state={{ time_planted: 123 }} updateNum={1} />);
    // 模拟20分钟后的状态
    jest.useFakeTimers().setSystemTime(new Date(Date.now() + 20 * 60 * 1000));
    expect(screen.getByTestId('final-texture')).toBeInTheDocument();
  });
});

Garden组件测试

Garden组件负责加载和管理多个GardenTile，测试文件src/components/Garden.test.tsx：

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

describe('Garden', () => {
  const mockSetTileStates = jest.fn();
  
  test('loads garden data on mount', async () => {
    const mockContract = {
      account: { address: { toB256: () => '0x123' } },
      functions: {
        get_garden_vec: jest.fn().mockReturnValue({ get: jest.fn().mockResolvedValue({ value: [] }) })
      }
    };
    
    render(
      <Garden 
        tileStates={[]} 
        contract={mockContract} 
        setTileStates={mockSetTileStates} 
        updateNum={1} 
      />
    );
    
    expect(mockContract.functions.get_garden_vec).toHaveBeenCalled();
  });
});

测试命令与覆盖率

在package.json中添加测试脚本：

"scripts": {
  "test": "jest",
  "test:watch": "jest --watch",
  "test:coverage": "jest --coverage"
}

运行测试命令：

npm test

查看测试覆盖率：

npm run test:coverage

测试最佳实践

1. 组件隔离：使用mock隔离外部依赖，如contract和position
2. 用户视角：测试用户可见的行为而非内部实现
3. 异步处理：使用waitFor和findBy*处理异步渲染
4. 状态覆盖：测试组件的不同状态（加载中、空状态、错误状态）
5. 避免过度测试：专注关键逻辑而非细枝末节

通过自动化测试，我们可以确保植物从种子到成熟的每个阶段都正确渲染，用户交互如种植、收获等功能正常工作。测试覆盖率报告帮助我们发现未测试的代码，提高代码质量和可靠性。

现在你已经掌握了sway-farm前端自动化测试的核心方法，开始为你的组件编写测试吧！有任何问题，欢迎查看项目测试文档或提交issue。

【免费下载链接】sway-farm 项目地址: https://gitcode.com/GitHub_Trending/sw/sway-farm