Basic React ABTesting Component - POC

ABTest.tsx

import React, { ReactNode, useState } from "react";

type Experiment = {
  exposure: number;
  render: ({ success }: { success: any }) => any;
  name?: string;
};

enum TestEvent {
  "VIEW" = "View",
  "SUCCESS" = "Success",
}

type Props = {
  name: string;
  experiments: Experiment[];
};

const ABTest = ({ name, experiments }: Props) => {
  const [renderedExperiment, setRenderedExperiment] = useState<
    JSX.Element | ReactNode | Element | undefined
  >(undefined);

  const triggerEvent = (
    event: TestEvent,
    experimentNumber: number,
    experimentName?: string
  ) => () => {
    console.log("🧪 ABTest", { name, event, experimentNumber, experimentName });
  };

  const pickExperiment = () => {
    const rand = Math.random();
    let totalExposure = 0;

    const selectedExperiment = experiments.find(experiment => {
      totalExposure += experiment.exposure;
      return rand <= totalExposure;
    });

    return selectedExperiment || null;
  };

  const renderExperiment = () => {
    const experiment = pickExperiment();

    if (!experiment) {
      console.error("Error: No experiment was picked.");
      return null;
    }

    const { render, name: experimentName } = experiment;
    const experimentNumber = experiments.indexOf(experiment) + 1;

    triggerEvent(TestEvent.VIEW, experimentNumber, experimentName)();

    return render({
      success: triggerEvent(
        TestEvent.SUCCESS,
        experimentNumber,
        experimentName
      ),
    });
  };

  if (renderedExperiment === undefined) {
    setRenderedExperiment(renderExperiment());
  }

  return <>{renderedExperiment}</>;
};

export default ABTest;

App.tsx

import ABTest from './ABTest';

const App = () => (
  <ABTest
    name="favfood"
    experiments={[
      {
        exposure: 0.5,
        name: 'pizza',
        render: ({ success }) => (
          <div>
            <button onClick={success}>🍕</button>
            <button>🍿</button>
          </div>
        ),
      },
      {
        exposure: 0.5,
        name: 'popcorn',
        render: ({ success }) => (
          <div>
            <button onClick={success}>🍿</button>
            <button>🍕</button>
          </div>
        ),
      },
    ]}
  />
);

export default App;