consistent-class-names.js

import {mount as enzymeMount, render as enzymeRender, shallow as enzymeShallow} from 'enzyme';
import React from 'react';
import JssProvider from 'react-jss/lib/JssProvider';

export const generateClassName = (rule, styleSheet) => `${styleSheet.options.classNamePrefix}-${rule.key}`;

function consistentClassNameWrapper(func, overrides = {}) {
  return function(children, ...opts) {
    let wrapper = func(<JssProvider generateClassName={generateClassName}>{children}</JssProvider>, ...opts);

    for (const key in overrides) {
      wrapper[key] = overrides[key];
    }

    return wrapper;
  };
}

/**
 * Renders the component tree in Enzyme using a custom JssProvider that provides static class names
 * This way our snapshots are not different just by changing the order of the tests
 *
 * @see https://github.com/mui-org/material-ui/issues/9492
 */
export const render = consistentClassNameWrapper(enzymeRender);