https://github.com/thymikee/linaria-jest

🃏 Jest utilities for Linaria
https://github.com/thymikee/linaria-jest

Last synced: about 2 months ago
JSON representation

🃏 Jest utilities for Linaria

• Host: GitHub
• URL: https://github.com/thymikee/linaria-jest
• Owner: thymikee
• License: mit
• Created: 2017-10-17T21:09:02.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T09:17:19.000Z (almost 2 years ago)
• Last Synced: 2024-07-09T13:00:51.021Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 500 KB
• Stars: 16
• Watchers: 3
• Forks: 4
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - linaria-jest

README

        
# Jest utilities for [Linaria](https://github.com/callstack/linaria)

A set of utilities for more delightful testing of Linaria–enhanced code with Jest.

## API

* `reactSerializer` – React snapshot serializer

* `preactSerializer` – Preact snapshot serializer

## Snapshot serializers

One of the most helpful utilities for CSS in JS libraries are [snapshot serialiers](http://facebook.github.io/jest/docs/en/expect.html#expectaddsnapshotserializerserializer), which are able to colocate styles with JS code. Linaria provides serializers for React and Preact components by default.

### Usage

Use it directly in your test file, or in `setupFiles`:

```js

import { reactSerializer } from 'linaria-jest';

expect.addSnapshotSerializer(reactSerializer);

```

Make sure you **turn off** `linaria/babel` preset for testing purposes, otherwise it won't work.

E.g. change this:

```json

{

  "presets": ["env", "react", "linaria/babel"],

}

```

...to this:

```json

{

  "presets": ["env", "react"],

  "env": {

    "development": {

      "presets": ["linaria/babel"]

    },

    "production": {

      "presets": ["linaria/babel"]

    }

  }

}

```

### Example

Here's a component we want to snapshot:

```jsx

import React from 'react';

import { css, names } from 'linaria';

import theme from '../theme';

export default function Container({ children, className }) {

  return 
{children}
;

}


const container = css`

  max-width: 900px;

  &:hover {

    background: ${theme.hover};

  }

`;

```

We write a test (provided that our serializer is added in `setupFiles`):

```jsx

import React from 'react';

import { css } from 'linaria';

test('my pretty Container', () => {

  const tree = renderer.create(

    text;

  );

  expect(tree).toMatchSnapshot();

});

```

...and the output snapshot with serializer applied is:

```js

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`my pretty Container 1`] = `

.a0 {

  max-width: 900px;

}

.a0:hover {

  background: #fff;

}

.a1 {

  -webkit-flex: 1;

  -ms-flex: 1;

  flex: 1;

}



  text



`

```