How to use enzyme-adapter-react-16 - 10 common examples

/* eslint-env mocha */
/* eslint-disable no-console */
import { expect, use } from 'chai';
import Adapter from 'enzyme-adapter-react-16.3';
import { configure, mount } from 'enzyme';
import sinonChai from 'sinon-chai';
import sinon from 'sinon';
import Kefir from 'kefir';
import React from 'react';
import { chaiPlugin } from 'brookjs-desalinate';
import PropTypes from 'prop-types';
import observableOf from '../observableOf';

const { plugin , prop, value, send, error, end } = chaiPlugin({ Kefir });
use(plugin);
configure({ adapter: new Adapter() });
use(sinonChai);

describe('observableOf', () => {
    let wrapper;

    beforeEach(() => {
        sinon.stub(console, 'error');
    });

    afterEach(() => {
        console.error.restore();
        wrapper.unmount();
    });

    it('should not complain if nothing provided', () => {
        const NothingProvided = () =&gt; <button>Click me</button>;

/*
 * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
 */

// Note: using CommonJS syntax here so this can be used in the isomorphic tests, which must run in a server environment.
require("./polyfill");

const Enzyme = require("enzyme");
// test against React 15 with REACT=15 env variable.
// this module is swapped out using webpack aliases in webpack.config.karma.js
const Adapter = require("enzyme-adapter-react-16");

Enzyme.configure({ adapter: new Adapter() });

// tslint:disable-next-line:no-console
console.info(`Enzyme configured with *${Adapter.name}*`);

// @flow
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({adapter: new Adapter()});

jest.mock('sulu-admin-bundle/services/Config', () => ({
    endpoints: {
        'config': 'config_url',
        'translations': 'translations_url',
        'loginCheck': 'login_check_url',
        'logout': 'logout_url',
        'profileSettings': 'profile_settings_url',
        'forgotPasswordReset': 'forgot_password_reset_url',
        'resetPassword': 'reset_password',
        'resources': 'resources_url/:resource',
        'routing': 'routing',
    },
    translations: ['en', 'de'],
    fallbackLocale: 'en',
}));

/* eslint-env mocha */
import Adapter from 'enzyme-adapter-react-16.3';
import { configure, mount } from 'enzyme';
import { expect, use } from 'chai';
import Kefir from 'kefir';
import { chaiPlugin } from 'brookjs-desalinate';
import h from '../h';
import Collector from '../Collector';
import { Provider } from '../context';

const { plugin, value } = chaiPlugin({ Kefir });

configure({ adapter: new Adapter() });
use(plugin);

describe('Collector', () => {
    const onButtonClick = e$ => e$.map(() => ({ type: 'CLICK' }));

    const CollectedButton = ({ text, enabled, aggregated$ }) => (
        
            
                {enabled ?
                    <button>
                        {text}
                    </button> :
                    <span>nothing to click</span>}
            
        
    );

// Entry point for Jest tests
import { configure } from 'enzyme/build';
import Adapter from 'enzyme-adapter-react-16/build';
import '@testing-library/jest-dom/extend-expect';

configure({ adapter: new Adapter() });

import React from 'react';
/* eslint-disable import/no-extraneous-dependencies */
import initStoryshots from '@storybook/addon-storyshots';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16.3';
/* eslint-enable */

import MailIcon from './mailIcon';

// Separate the snapshots in directories next to each component
// Name should match with the story name
initStoryshots({
  storyKindRegex: /^MailIcon$/
});

configure({ adapter: new Adapter() });

describe(' - with shallow', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow();
  });

  it('should render a svg composed by 2 path', () => {
    expect(wrapper.find('svg[className="mailIcon"]')).toHaveLength(1);
  });
});

// @flow
import React from 'react';
/* eslint-disable import/no-extraneous-dependencies */
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16.3';
/* eslint-enable */

import SentimentBarIcon from './sentimentBarIcon';
import type { Props as SentimentBarIconProps } from './sentimentBarIcon';

configure({ adapter: new Adapter() });

describe(' - with shallow', () => {
  let wrapper;
  let sentimentBarIcon: SentimentBarIconProps;

  beforeEach(() => {
    sentimentBarIcon = { level: 2 };
    wrapper = shallow();
  });

  it('should render a loading icon', () => {
    expect(wrapper.find('svg[className="icon"]')).toHaveLength(1);
  });
});

// @flow
import React from 'react';
/* eslint-disable import/no-extraneous-dependencies */
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16.3';
/* eslint-enable */

import TooltipIcon from './tooltipIcon';

configure({ adapter: new Adapter() });

describe(' - with shallow', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow();
  });

  it('should render a tooltip icon', () => {
    expect(wrapper.find('svg[className="icon tooltip"]')).toHaveLength(1);
    expect(wrapper.find('text[className="text"]')).toHaveLength(1);
    expect(wrapper.find('circle[className="circle"]')).toHaveLength(1);
  });
});

import React from 'react';
/* eslint-disable import/no-extraneous-dependencies */
import { configure, shallow } from 'enzyme';
import initStoryshots from '@storybook/addon-storyshots';
import Adapter from 'enzyme-adapter-react-16.3';
/* eslint-enable */

import EditPostIcon from './editPostIcon';

// Separate the snapshots in directories next to each component
// Name should match with the story name
initStoryshots({
  storyKindRegex: /^EditPostIcon$/
});

configure({ adapter: new Adapter() });

describe(' - with shallow', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow();
  });

  it('should render a svg with editPostIcon class', () => {
    expect(wrapper.find('svg[className="editPostIcon"]')).toHaveLength(1);
    expect(wrapper.find('path')).toHaveLength(1);
  });
});

import React from 'react';
/* eslint-disable import/no-extraneous-dependencies */
import initStoryshots from '@storybook/addon-storyshots';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16.3';
/* eslint-enable */

import TickIcon from './tickIcon';

// Separate the snapshots in directories next to each component
// Name should match with the story name
initStoryshots({
  storyKindRegex: /^TickIcon$/
});

configure({ adapter: new Adapter() });

describe(' - with shallow', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow();
  });

  it('should render a svg composed by 2 path', () => {
    expect(wrapper.find('svg[className="tickIcon"]')).toHaveLength(1);
  });
});