Jest-styled-components: Ava support?

[dlebedynskyi]

Hi,
First thanks for this project. It seem to be the only way now to test styled components.
I was wondering if there is any chance that you guys could support ava as well?

[MicheleBertoli]

Thanks @dlebedynskyi, I'm glad you find this package useful.
If AVA supports custom matchers and serializers, I guess it wouldn't be hard to port the project.
I'll investigate further and let you know.

[dlebedynskyi]

@MicheleBertoli I looked over code you have, and toHaveStyleRule is basically a bool match.
And I was able to extract and match styles using ServerStyleSheet https://github.com/styled-components/jest-styled-components/blob/master/src/utils.js#L32

Ava serializer basically takes any json value so it could be something like t.snapshot(styleSheetSerializer(style))

Was looking myself in possibility of extracting all not jest specific code( https://github.com/styled-components/jest-styled-components/blob/master/src/index.js#L11).

Other then those 2 lines it should all work the same.

[MicheleBertoli]

Unfortunately, it doesn't seem that ava exports any serialization-related API at the moment (I asked on Gitter) but I'll take a look at the project and I'll try to figure how to write a plugin for concordance.
As soon as they'll support extensions and plugins, I'll get back to this.
I'm closing the issue for now. Thanks!

[flaviouk]

Hey, I just played around with this today and managed to make it work with ava.
They don't have any serialization like jest, but you can use the ava.require array inside package.json, I did something like:

package.json

{
    "ava": {
        "require": ["./setup.js"]
    }
}

setup.js

import test from 'ava';
import toJson from 'enzyme-to-json';

// A slightly different version of this repo
import parseStyles from './parseStyles';

test.toJson = wrapper => parseStyles(toJson(wrapper));

test.js

import test from 'ava';
import { mount } from 'enzyme';

import StyledComponent from './StyledComponent';

test('it should snapshot a styled component', t => {
    t.snapshot(test.toJson(mount(<StyledComponent />)))
})

Would you guys be interested in creating a more generalized package name and support both jest and ava?

[flaviouk]

Published here:
https://github.com/LonRes/ava-styled-components

[MicheleBertoli]

This is awesome @imflavio, thank you very much.
Let's cc @mxstbr @kitten here so that they can make a call whether we want to include your package into the org, or create a more generic library, or something else.

[rzec-r7]

Any update on this? This repo has been working great for me but I would feel ever so slightly better about using it knowing that it was part of the styled-components org.

[rzec-r7]

@MicheleBertoli @mxstbr @kitten
Just pinging again to see if there is any movement on how / if this library is going to be integrated into the styled-components org?