wix-ui-test-utils

A common test utils used within the different wix-ui packages

Generic test utils

The following helper functions can be used within the different wix-ui packages:

isClassExists

Returns true if a certain class exists on an element.

import {isClassExists} from '@wix/wix-ui-test-utils/react-helpers';

const element = document.createElement('div');
element.classList.add('big');

isClassExists(element, 'big'); // true
isClassExists(element, 'small'); // false

sleep

Returns a promise that resolves after a given timeout.

import {sleep} from '@wix/wix-ui-test-utils/react-helpers';

sleep(5000)
  .then(() => console.log('Hello world'));

async function foo() {
  await sleep(5000);
  console.log('Hello world');
}

makeControlled

A HOC that makes underlying component "controlled". The "controlled" element will be initiated with an initial value, invoke an onChange callback and will bind the passed prop functions.

import {mount} from 'enzyme';
import {makeControlled} from '@wix/wix-ui-test-utils/react-helpers';

const UncontrolledInput = props => (
  <input {...props}/>
);

const ControlledInput = makeControlled(UncontrolledInput);
const component = mount(
  <ControlledInput
    value={initialValue}
  />
);

// ...

Testkit helpers

createDriverFactory

Accepts a component driver. Returns a new driver factory. An explanation of drivers can be viewd here.

import React from 'react';
import {createDriverFactory} from '@wix/wix-ui-test-utils/driver-factory';
import {buttonDriverFactory} from './Button.driver';
import Button from './';

const createDriver = createDriverFactory(buttonDriverFactory);

describe('Button', () => {
  it('should exist', () => {
    const driver = createDriver(<Button />);
    expect(driver.exists()).toBe(true);
  });
});

Vanilla (react-test-utils)

testkitFactoryCreator

Accepts a component driver. Returns a testkit factory.

import {testkitFactoryCreator} from '@wix/wix-ui-test-utils/vanilla';
import datePickerDriverFactory './driver';

const driverFactory = testkitFactoryCreator(datePickerDriverFactory);
const driver = driverFactory({
  // ...
});

driver.click();
driver.exists();
// ...

isTestkitExists

This function should be used inside the component tests in order to to perform a sanity check for the exposed testkit. It accepts a React Element and a testkit factory. Returns true if the driver works as expected.

import {testkitFactoryCreator, isTestkitExists} from '@wix/wix-ui-test-utils/vanilla';
import datePickerDriverFactory './driver';

const driverFactory = testkitFactoryCreator(datePickerDriverFactory);

isTestkitExists(
  <DatePicker />,
  driverFactory
); // true

Enzyme

enzymeTestkitFactoryCreator

Accepts a component driver. Returns a testkit factory based on enzyme.

import {enzymeTestkitFactoryCreator} from '@wix/wix-ui-test-utils/enzyme';
import datePickerDriverFactory './driver';

const driverFactory = enzymeTestkitFactoryCreator(datePickerDriverFactory);
const driver = driverFactory({
  // ...
});

driver.click();
driver.exists();
// ...

isEnzymeTestkitExists

This function should be used inside the component tests in order to to perform a sanity check for the exposed testkit. It accepts a React Element and a testkit factory. Returns true if the driver works as expected.

import {enzymeTestkitFactoryCreator, isEnzymeTestkitExists} from '@wix/wix-ui-test-utils/enzyme';
import datePickerDriverFactory './driver';
import {mount} from 'enzyme';

const driverFactory = enzymeTestkitFactoryCreator(datePickerDriverFactory);

isEnzymeTestkitExists(
  <DatePicker />,
  driverFactory,
  mount
); // true