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();
  });
});