Skip to main content

Testing with React

Optimize Deprecation

Uniform Optimize has been deprecated and replaced by Context, a more powerful and flexible personalization solution. Optimize is not being discontinued at this time, but it will not receive updates or new features.

We do not recommend starting a new project with Optimize. If you have an existing project that uses Optimize, you can upgrade your project to Context at no cost using our upgrade guide. If you have any issues with this process you can contact our team.

The <Test /> component accepts an array of variations and allows you to perform different types of tests with two or more variants. Distribution for each variant is spread evenly across each unless otherwise specified, which describes the test component's data structures and shows the different modes that the component can operate.

Please follow the Getting Started with React guide before trying to test components.

Variation Data​

type TestVariant = {
    /** The identifier for this variant. This value persisted to storage when a variant is selected. */
    id: string;
    /** A number between 0 and 100 representing what percentage of visitors will be selected for this variant.
     * If not provided, this variant will be selected equally. */
    distribution?: number;
};

There are a few different fields on this type but only one, id, is required:

  • id - This is a unique id for this particular test variant. This id will be stored once a variant is selected for the user and should not change after a test has begun. If it does change, a new selection will occur for people who were chosen to see this variant.
  • distribution - By default, each variant is shown evenly, but you have the option of overriding this on a per-variant basis. You can specify a distribution for one or many variants, and any variants that do not specify a distribution will consume the remainder left over after distributions are accounted for.

Test Component​

The test component allows you to wrap areas in your application that you would like to test - entire components or subsections of components. There are various props you can pass the component:

  • name - This will be the name given to the test running and used to define the test in the Uniform Optimize dashboard. If this name does not match or is not present in the dashboard, the test will not run and will hide the component.
  • variations - An array of variations that the test will select from, implementing the interface described in the previous section.
  • loadingMode - Similar to the <Personalize /> component, the test component has a loading mode during the brief period while the tracker is initializing. Using a loading mode will prevent the test from showing a different variant than the user has already selected. Only use this on the initial page load; if the tracker is initialized and client-side routing is being utilized, there will be no loading state. See more below for the different states of this prop.
  • component - Provides a React component that will be used to render the selected variation.

Example​

This examples demonstrates testing using hard-coded variations.


If your test variations have more than one component that might be used to render them:


If you want to customize your test distribution:


Loading Mode​

Loading mode has different states, this is the definition:

loadingMode?: 'default' | 'none' | React.ComponentType;
  • default - The default (first) variant will be shown during the initial tracker initialization.
  • none - The component is completely hidden until the tracker loads.
  • React.ComponentType - Allows you to specify a React component that should be shown while the tracker initializes. It is useful for areas that will be seen immediately when a page loads. It allows you to provide a placeholder component that could utilize transitions while the tracker is loading.
Last updated on