tessl/npm-umi

Enterprise-level, plugin-based React application framework with out-of-the-box functionality including routing, building, deployment, testing, and linting capabilities

—

Pending

Overview

Eval results

Files

Testing Utilities

Name: tessl/npm-umi
Author: tessl

Testing integration utilities for Jest configuration, alias resolution, and umi-specific testing setup.

Capabilities

Alias Configuration

Configure Jest with umi's alias system for proper module resolution in tests.

/**
 * Configure Jest with umi alias mappings for proper module resolution
 * @param config - Jest configuration object to modify
 * @returns Promise resolving to the modified Jest configuration
 */
function configUmiAlias(config: Config.InitialOptions): Promise<Config.InitialOptions>;

Usage Examples:

import { configUmiAlias } from "umi/test";

// Basic Jest configuration with umi aliases
const jestConfig = await configUmiAlias({
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
});

// Advanced configuration
const jestConfig = await configUmiAlias({
  testEnvironment: "jsdom",
  moduleNameMapper: {
    // These will be merged with umi's alias mappings
    "\\.(css|less|scss)$": "identity-obj-proxy",
  },
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
  testMatch: [
    "<rootDir>/src/**/__tests__/**/*.(ts|js|tsx|jsx)",
    "<rootDir>/src/**/?(*.)(spec|test).(ts|js|tsx|jsx)",
  ],
});

export default jestConfig;

Alias Resolution

Get and resolve umi's alias configuration for manual module resolution.

/**
 * Get the current umi alias configuration
 * @returns Promise resolving to alias mapping object
 */
function getUmiAlias(): Promise<Record<string, string>>;

/**
 * Resolve alias path with recursive resolution support
 * @param alias - Alias mapping object
 * @param key - Key to resolve
 * @returns Resolved absolute path
 */
function getAliasPathWithKey(
  alias: Record<string, string>, 
  key: string
): string;

Usage Examples:

import { getUmiAlias, getAliasPathWithKey } from "umi/test";

// Get current alias configuration
const aliases = await getUmiAlias();
console.log(aliases);
// Output: { "@": "/project/src", "@@": "/project/.umi", ... }

// Resolve specific alias
const srcPath = getAliasPathWithKey(aliases, "@/components/Button");
console.log(srcPath); // "/project/src/components/Button"

// Handle nested aliases
const aliases = {
  "@": "/project/src",
  "components": "@/components",
};
const resolved = getAliasPathWithKey(aliases, "components/Button");
console.log(resolved); // "/project/src/components/Button"

Testing Setup

Access to all utilities from @umijs/test package for comprehensive testing support.

// All exports from @umijs/test are available
// Including Jest configuration, test utilities, and matchers

Common Testing Patterns:

import { configUmiAlias } from "umi/test";
import type { Config } from "@jest/types";

// Jest configuration file (jest.config.ts)
const config: Config.InitialOptions = {
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
  transform: {
    "^.+\\.(ts|tsx)$": ["ts-jest", {
      tsconfig: "tsconfig.json",
    }],
  },
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "jest-transform-stub",
  },
  collectCoverageFrom: [
    "src/**/*.{ts,tsx}",
    "!src/**/*.d.ts",
    "!src/setupTests.ts",
  ],
  testMatch: [
    "<rootDir>/src/**/__tests__/**/*.(ts|js|tsx|jsx)",
    "<rootDir>/src/**/?(*.)(spec|test).(ts|js|tsx|jsx)",
  ],
};

export default configUmiAlias(config);

Alias Resolution Algorithm

The alias resolution follows a recursive pattern:

Direct Match: If the key exists directly in the alias mapping, use its value
Recursive Resolution: If the alias value is itself an alias, resolve recursively
Prefix Match: For keys like @/components/Button, find aliases that match the prefix
Path Substitution: Replace the matched prefix with its resolved path

// Example resolution process
const aliases = {
  "@": "/project/src",
  "components": "@/components", // Points to another alias
  "utils": "/project/src/utils",
};

// Resolving "components/Button"
// 1. Find prefix match: "components" -> "@/components"
// 2. Recursive resolve: "@/components" -> "/project/src/components"  
// 3. Substitute: "components/Button" -> "/project/src/components/Button"

Testing Utilities Integration

The testing utilities integrate with:

Jest Configuration: Automatic moduleNameMapper generation
TypeScript: Full type support for test files
Path Resolution: Seamless import resolution in tests
Umi Service: Access to umi's internal configuration

// Test file example using umi aliases
import { render, screen } from "@testing-library/react";
import Button from "@/components/Button"; // Resolved via umi alias
import { formatDate } from "@/utils/date"; // Also resolved via alias
import { mockUser } from "@@/test-fixtures"; // Umi internal alias

describe("Button Component", () => {
  test("renders correctly", () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole("button")).toBeInTheDocument();
  });

  test("formats date correctly", () => {
    const date = new Date("2023-01-01");
    expect(formatDate(date)).toBe("2023-01-01");
  });
});

Type Definitions

// Jest configuration type (from @jest/types)
interface Config.InitialOptions {
  testEnvironment?: string;
  moduleNameMapper?: Record<string, string>;
  transform?: Record<string, string | [string, any]>;
  setupFilesAfterEnv?: string[];
  testMatch?: string[];
  collectCoverageFrom?: string[];
  [key: string]: any;
}

// Alias mapping type
type AliasMapping = Record<string, string>;

Install with Tessl CLI