External LibrariesRegistration & Sync

Registration & Sync

Register your external library in ReAPI and sync components.

Adding a Library

  1. Go to Project SettingsExternal Libraries
  2. Click Add Library
  3. Fill in the required fields

Required Fields

FieldDescriptionExample
TitleDisplay name in UI”Payment Test Library”
Library URLURL to UMD bundlehttps://unpkg.com/@org/lib@1.0.0/dist/build.umd.js
Library NameGlobal variable namePaymentTestLib

Optional Fields

FieldDescriptionExample
DescriptionWhat this library provides”Payment validation and test utilities”
Type URLURL to TypeScript definitionshttps://unpkg.com/@org/lib@1.0.0/dist/build.d.ts

Finding the Library Name

The library name is the global variable your bundle exposes:

// In your bundle (build.umd.js)
var PaymentTestLib = (function() {
  // ...
})();

Check your build config:

// rollup.config.js
export default {
  output: {
    name: 'PaymentTestLib',  // This is your library name
    format: 'umd',
  },
};

Sync Process

After filling in the fields, click Sync from URL.

What Happens

  1. Fetch: ReAPI downloads your bundle from the URL
  2. Execute: Bundle runs in sandbox, exposing the global
  3. Inspect: ReAPI reads exported arrays:
    • $$AssertionFunctions
    • $$ValueFunctions
    • $$ApiHooks
    • $$Utilities
    • $$TestCases
  4. Index: Component metadata saved to database

Sync Output

Synced components:
  ✓ 5 custom assertions
  ✓ 3 value generators
  ✓ 2 API hooks
  ✓ 4 utilities
  ✓ 8 test cases

Enabling the Library

After sync, toggle Enabled to make components available:

  • Disabled: Components not available anywhere
  • Enabled: Components available in test engine and UI

Viewing Components

After sync, you can browse discovered components:

Assertions Tab

  • View all custom assertions
  • See ID, name, description
  • Check enabled/deprecated status

Generators Tab

  • View all value generators
  • See parameter schemas

Hooks Tab

  • View before/after hooks
  • See hook type

Test Cases Tab

  • View all external test cases
  • See tags, priority, timeout
  • Run individual tests

Re-syncing

When you deploy a new version:

  1. Update the Library URL (if version changed)
  2. Click Sync from URL
  3. Review component changes

What Changes on Re-sync

  • New components are added
  • Removed components are marked deprecated
  • Updated metadata is refreshed
  • Existing component IDs preserved

Multiple Libraries

You can register multiple external libraries:

Library 1: AuthTestLib
  - Auth assertions
  - Auth generators

Library 2: PaymentTestLib  
  - Payment assertions
  - Payment test cases

Library 3: CommonUtils
  - Shared utilities

Loading Order

Libraries load in the order they appear in the list. Use drag-and-drop to reorder if one library depends on another.

Troubleshooting Sync

”Failed to fetch library”

  • Verify URL is accessible (try in browser)
  • Check CORS headers are set
  • Ensure HTTPS for production

”Library name not found”

  • Verify the global variable name matches bundle
  • Check bundle format is IIFE/UMD, not ESM

”No components found”

  • Verify export names: $$AssertionFunctions, $$ValueFunctions, etc.
  • Check exports are arrays
  • Ensure components have required fields (id, name, function)

“Component X not showing”

  • Check enabled: true on the component
  • Check deprecated: false for new components
  • Re-sync after making changes

Best Practices

Use Versioned URLs

# ✅ Good: Specific version
https://unpkg.com/@org/lib@1.0.0/dist/build.umd.js

# ⚠️ Risky: Latest version (for dev only)
https://unpkg.com/@org/lib@latest/dist/build.umd.js

Provide Type Definitions

Adding Type URL enables:

  • Autocomplete in web editor
  • Better error messages
  • Parameter documentation

Document Component IDs

Keep a reference of component IDs:

## Component IDs
 
### Assertions
- `is-valid-email` - Email format validation
- `is-valid-iban` - IBAN validation
 
### Test Cases
- `auth-login` - Login flow test
- `auth-logout` - Logout flow test