Testing

Runtime only functionality
These testing utils are only available when styles have not been extracted to a stylesheet.

Use the Jest matcher when writing unit tests to assert style behavior over state changes.

First install the matcher:

npm install @compiled/jest --save-dev

Then configure it in Jest:

// test/setup.js
const { toHaveCompiledCss } = require('@compiled/jest');

expect.extend({
  toHaveCompiledCss,
});

// jest.config.js
module.exports = {
  setupFilesAfterEnv: ['./test/setup.js'],
};

The matcher is now globally available for your tests. Here we are using the assertion with react-testing-library.

import { render } from '@testing-library/react';

it('should have small font', () => {
  const SmallText = styled.div({
    fontSize: '12px',
    fontWeight: 'bold',
  });

  const { getByText } = render(<SmallText>hello world</SmallText>);

  expect(getByText('hello world')).toHaveCompiledCss('font-size', '12px');
});

TypeScript

Having types flow through generally requires an extra step. First create a <root>/types/global.d.ts file and then import the jest matcher to enable types.

import '@compiled/jest';

Finally add your /types/ folder as a type root.

{
  "compilerOptions": {
    "typeRoots": ["./node_modules", "./types"]
  }
}

Single match

Assert a single style by passing a string.

expect(element).toHaveCompiledCss('font-size', '12px');

Multi match

Assert multiple styles by passing an object.

expect(element).toHaveCompiledCss({
  fontSize: '12px',
  fontWeight: 'bold',
});

Selector match

Assert against any CSS selector and pseudo classes by passing target in an object as the third argument.

expect(element).toHaveCompiledCss('background-color', 'blue', {
  target: ':hover',
});

Media query match

Assert against media queries by passing media in an object as the third argument.

expect(element).toHaveCompiledCss('padding', '8rem', {
  media: 'screen and (min-width: 1220px)',
});

Suggest changes to this page ➚

Shorthand properties

Packages

react