livecodes/testing

LiveCodes — Write and Run Tests

LiveCodes includes Jest and Testing Library for automated testing in the browser. Tests run against the result page in real-time.

Setup

import { createPlayground } from 'livecodes';

// Project with tests
createPlayground('#container', {
  template: 'jest', // Jest starter template
  params: { tests: 'open' }, // Show tests panel
});

// Custom test configuration
createPlayground('#container', {
  config: {
    activeEditor: 'script',
    script: {
      language: 'javascript',
      content: `
export function add(a, b) {
  return a + b;
}

export function greet(name) {
  return 'Hello, ' + name;
}
      `,
    },
    tests: {
      language: 'javascript',
      content: `
import { add, greet } from './script';

describe('add', () => {
  test('adds numbers', () => {
    expect(add(1, 2)).toBe(3);
  });

  test('handles negatives', () => {
    expect(add(-1, -2)).toBe(-3);
  });
});

describe('greet', () => {
  test('greets by name', () => {
    expect(greet('World')).toBe('Hello, World');
  });
});
      `,
    },
  },
  params: { tests: 'open' },
});

Core Patterns

Test exports from script editor

// Script editor (script.js)
export default function greet(name) {
  return 'Hello, ' + name;
}

export const add = (a, b) => a + b;

// Also available in global scope
window.multiply = (a, b) => a * b;

// Tests editor
import greet, { add } from './script'; // Relative import, no extension

describe('imports', () => {
  test('greet', () => {
    expect(greet('World')).toBe('Hello, World');
  });

  test('add', () => {
    expect(add(1, 2)).toBe(3);
  });
});

describe('globals', () => {
  test('multiply', () => {
    expect(window.multiply(2, 3)).toBe(6);
  });
});

Use Testing Library

// React Testing Library
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import userEvent from '@testing-library/user-event';

test('button click', async () => {
  render(<MyComponent />);
  await userEvent.click(screen.getByText('Click me'));
  expect(screen.getByText('Clicked')).toBeInTheDocument();
});

// DOM Testing Library
import { getByText, waitFor } from '@testing-library/dom';

test('element appears', async () => {
  document.body.innerHTML = '<div id="root"></div>';
  // ... render something
  await waitFor(() => {
    expect(getByText(document.body, 'Loaded')).toBeTruthy();
  });
});

Run tests programmatically via SDK

const playground = await createPlayground('#container', {
  config: {
    /* ... */
  },
});

// Run tests and get results
const { results } = await playground.runTests();

results.forEach((result) => {
  console.log(result.status); // 'pass', 'fail', or 'skip'
  console.log(result.testPath); // ['describe', 'it']
  console.log(result.duration); // milliseconds
  console.log(result.errors); // string[] of error messages
});

// Watch for test results
playground.watch('tests', ({ results, error }) => {
  if (error) {
    console.error('Test error:', error);
    return;
  }
  const passed = results.filter((r) => r.status === 'pass');
  console.log(`${passed.length} tests passed`);
});

Use Jest globals directly

// Jest globals available without import
describe('my tests', () => {
  test('passes', () => {
    expect(1 + 1).toBe(2);
  });

  test('asynchronous', async () => {
    const result = await someAsyncFunction();
    expect(result).toBe('expected');
  });

  test.skip('skipped', () => {
    // Not run
  });

  test.only('run only this', () => {
    // Only this test runs
  });
});

// Lifecycle hooks
beforeAll(() => {
  /* runs once before all tests */
});
afterAll(() => {
  /* runs once after all tests */
});
beforeEach(() => {
  /* runs before each test */
});
afterEach(() => {
  /* runs after each test */
});

// Mocks
jest.fn();
jest.mocked(obj);
jest.spyOn(obj, 'method');

Use Chai assertions (alternative)

import { assert } from 'chai';

describe('with Chai', () => {
  test('assertions', () => {
    assert.equal(1 + 1, 2);
    assert.isArray([1, 2, 3]);
    assert.include([1, 2, 3], 2);
  });
});

Test Panel Controls

In the standalone app or visible tests panel:

• Run button: Run tests (shortcut: Ctrl/Cmd + Alt + T)
• Watch toggle: Auto-run tests on code change
• Reset button: Clear test results
• Edit button: Open test editor (not available in embeds)

Common Mistakes

HIGH Script errors prevent tests from loading

Wrong:

// Script editor has syntax error
export function add(a, b) {
  return a +  // Syntax error - missing operand
}

// Tests editor - tests never run because script failed
import { add } from './script';
test('add', () => expect(add(1, 2)).toBe(3));

Understanding:

// Tests run against the result page
// Script errors prevent the page from loading
// Always ensure script compiles before testing

// Check the console for script errors
// Fix script errors before writing tests

Tests are added to the result page. Script errors (import errors, syntax errors) prevent the result page from loading, which prevents tests from running.

Source: docs/docs/features/tests.mdx — Example section

MEDIUM Import path must be relative without extension

Wrong:

import { add } from 'script'; // Missing ./
import { add } from './script.js'; // Has extension

Correct:

import { add } from './script'; // Relative import, no extension

When importing from the script editor in tests, use relative imports without file extensions.

Source: docs/docs/features/tests.mdx — Importing Code section

Supported Jest Features

Supported Testing Libraries

Tests run in the browser using Jest. Libraries are automatically available — no import maps needed for testing libraries.