How to use jest-emotion - 10 common examples

import * as emotion from "emotion";
import { createSerializer } from "jest-emotion";
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import { createSerializer as enzymeSerializer } from "enzyme-to-json";

// @ts-ignore
expect.addSnapshotSerializer(enzymeSerializer({ mode: "deep" }));

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

expect.addSnapshotSerializer(createSerializer(emotion));

};

// This is defined by webpack in storybook builds using the DefinePlugin plugin.
global.STORYBOOK = false;

global.__DEV__ = false;
global.__PRODUCTION__ = false;
global.__TEST__ = true;

// Add custom matchers
expect.extend(toHaveNoViolations);

// Add a snapshot serializer that removes random hashes
// from emotion class names.
expect.addSnapshotSerializer(
  createSerializer({
    classNameReplacer(className, index) {
      return `circuit-${index}`;
    }
  })
);

You may obtain a copy of the License at 

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Created by Patrick Simonian
*/
import * as emotion from 'emotion';
import { createSerializer } from 'jest-emotion';

expect.addSnapshotSerializer(createSerializer(emotion));
// mock out graph ql
global.graphql = jest.fn();

import React from 'react';
import Enzyme from 'enzyme';
import * as emotion from 'emotion';
import { createMatchers, createSerializer } from 'jest-emotion';
import semver from 'semver';

expect.addSnapshotSerializer(createSerializer(emotion));
expect.extend(createMatchers(emotion));

// Configure Enzyme for appropriate React version
let Adapter;
if (semver.satisfies(React.version, '15.0.0 - 15.4.x')) {
  Adapter = require('enzyme-adapter-react-15.4');
} else if (semver.satisfies(React.version, '^15.5.0')) {
  Adapter = require('enzyme-adapter-react-15');
} else if (semver.satisfies(React.version, '^16.0.0')) {
  Adapter = require('enzyme-react-adapter-future');
}
Enzyme.configure({ adapter: new Adapter() });

window.scroll = jest.fn();

/* eslint-disable emotion/no-vanilla */
import '@testing-library/jest-dom/extend-expect';
import fetch from 'node-fetch';
import * as emotion from 'emotion';
import { createSerializer } from 'jest-emotion';

window.fetch = fetch;
expect.addSnapshotSerializer(createSerializer(emotion));

import React from 'react';
import Enzyme from 'enzyme';
import * as emotion from 'emotion';
import { createMatchers, createSerializer } from 'jest-emotion';
import semver from 'semver';

expect.addSnapshotSerializer(createSerializer(emotion));
expect.extend(createMatchers(emotion));

// Configure Enzyme for appropriate React version
let Adapter;
if (semver.satisfies(React.version, '15.0.0 - 15.4.x')) {
  Adapter = require('enzyme-adapter-react-15.4');
} else if (semver.satisfies(React.version, '^15.5.0')) {
  Adapter = require('enzyme-adapter-react-15');
} else if (semver.satisfies(React.version, '^16.0.0')) {
  Adapter = require('enzyme-react-adapter-future');
}
Enzyme.configure({ adapter: new Adapter() });

window.scroll = jest.fn();

import React from 'react'
import { create as render } from 'react-test-renderer'
import { renderIntoDocument } from 'react-dom/test-utils'
import { createSerializer, createMatchers } from 'jest-emotion'
import * as emotion from 'emotion'
import Box from '../dist/emotion'

expect.addSnapshotSerializer(createSerializer(emotion))
expect.extend(createMatchers(emotion))

const renderJSON = el => render(el).toJSON()

describe('superbox/emotion', () => {
  test('renders', () => {
    const box = renderJSON()
    expect(box).toMatchInlineSnapshot(`
<div>
`)
  })

  test('renders with styles', () =&gt; {
    const box = renderJSON(
      </div>

it('css', () => {
      const props = { css: { color: 'rebeccapurple' } };
      shallow();
      const styles = getStyles(emotion);

      expect(styles).toContain(props.css.color);
    });

import {createMatchers, createSerializer} from 'jest-emotion'
import * as emotion from 'emotion'
import {styles as systemProps} from 'styled-system'
import {getClasses, getClassName, getComputedStyles, render} from './testing'

expect.extend(createMatchers(emotion))
expect.addSnapshotSerializer(createSerializer(emotion))

const stringify = d => JSON.stringify(d, null, '  ')

/**
 * These are props that styled-system aliases for backwards compatibility.
 * For some reason, they don't show up in our toImplementSystemProps() matcher,
 * so we skip over them.
 */
const ALIAS_PROP_TYPES = ['w', 'align', 'justify', 'wrap']

expect.extend({
  toMatchKeys(obj, values) {
    return {
      pass: Object.keys(values).every(key => this.equals(obj[key], values[key])),
      message: () => `Expected ${stringify(obj)} to have matching keys: ${stringify(values)}`
    }