create-react-app-enzyme-material-ui.js

/**
 * React
 */
import React from 'react';
import PropTypes from 'prop-types';

/**
 * Generic
 */
import areIntlLocalesSupported from 'intl-locales-supported';
import { shallow, mount } from 'enzyme';
import { theme } from 'componentes-frontend-react';

/**
 * Material ui
 */
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

/**
 * support 'pt-BR' in function that
 * uses .toLocaleString() method
 */
const localesMyAppSupports = ['pt-BR'];

if (global.Intl) {
  if (!areIntlLocalesSupported(localesMyAppSupports)) {
    const IntlPolyfill = require('intl');
    Intl.NumberFormat = IntlPolyfill.NumberFormat;
    Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat;

    Number.prototype.toLocaleString = IntlPolyfill.__localeSensitiveProtos.Number.toLocaleString;
    Date.prototype.toLocaleString = IntlPolyfill.__localeSensitiveProtos.Date.toLocaleString;
    Date.prototype.toLocaleDateString =
      IntlPolyfill.__localeSensitiveProtos.Date.toLocaleDateString;
  }
} else {
  global.Intl = require('intl');
}

/**
 * get Material-ui theme with our theme
 */
const muiTheme = getMuiTheme(theme);

/**
 * wrapper for enzyme's "mount()" function
 * with Material-ui theme provider
 * @param {React.ReactNode} node
 * @returns {Function}
 */
export const MuiMountWithContext = node =>
  mount(node, {
    context: { muiTheme },
    childContextTypes: { muiTheme: PropTypes.object },
  });

/**
 * wrapper for enzyme's "shallow()" function
 * with Material-ui theme provider
 * @param {React.ReactNode} node
 * @returns {Function}
 */
export const MuiShallowWithContext = node =>
  shallow(node, {
    context: { muiTheme },
    childContextTypes: { muiTheme: PropTypes.object },
  });

/**
 * Enzyme's context for preventDefault
 * because it doesn't have global object "window"
 */
const eventsPrototype = { preventDefault() {}, stopPropagation() {} };

describe('Beneficiamentos', () => {

  describe('renderTableRow immutable fn', () => {
    let wrapper;
    let getItens;

    beforeEach(() => {
      getItens = jest.fn();
      wrapper = MuiMountWithContext(
        <Table>
          <TableBody>
            {fn.renderTableRow(
              {
                areaAtual: 100,
                cooperante: 'Adair Vendruscolo',
                dataPrevisaoColheita: '2018-02-15T12:00:00.000Z',
                id: 1,
                idLote: 627,
                nomeCampo: '01',
                quantidadePrevisaoColheita: 245000,
                safra: '2014/2015',
                valorBeneficiado: 300000,
                valorRecebido: 100000,
                enderecoPropriedade: 'Passo Fundo - RS',
              },
              0,
              () => true,
            )}
          </TableBody>
        </Table>,
      );
    });

    test('1st column "nomeCampo" renders as "nomeCampo" + "safra"', () => {
      expect(
        wrapper.containsMatchingElement(
          <td>
            01<br />2014/2015
          </td>,
        ),
      ).toEqual(true);
    });
    
    /**
     * test class state
     */
    test('"handleClick" fn simulated onClick at IconButton', () => {
      /**
       * First click:
       * 1. state attr "open" MUST be "undefined"
       * 2. set state attr "open" to "true"
       * 3. call "getItens" fn once
       */
      expect(wrapper.state().open).toEqual(undefined);
      wrapper.find(IconButton).simulate('click', eventsPrototype);
      expect(wrapper.state().open).toEqual(true);
      expect(getItens).toHaveBeenCalledTimes(1);

      /**
       * Second click:
       * 1. set state attr "open" to "false"
       * 2. NOT call "getItens" again
       */
      wrapper.find(IconButton).simulate('click', eventsPrototype);
      expect(wrapper.state().open).toEqual(false);
      expect(getItens).toHaveBeenCalledTimes(1);
    });
    
    /**
     * test class method
     */
    test('"handleRequestClose" void fn', () => {
      expect(wrapper.state().open).toEqual(undefined);
      wrapper.instance().handleRequestClose();
      expect(wrapper.state().open).toEqual(false);
    });
    
  });
});