Unit tests with twin.macro

[DavidReinertToptal]

Hey all. I'm currently in the process of migrating apps from TailwindCSS to twin.macro + @emotion/react and I was looking for tips or advice on the best or least painful way to migrate unit tests. I have quite a large number of unit tests for various React components that have assertions like:

expect(element).toHaveClass('text-red-500');

I am aware of the @emotion/jest package that would allow me to at least assert against the styles applied by emotion, but that alone would still involve manually updating over 100 tests from the above syntax to:

import preset from 'tailwind-preset';
expect(element).toHaveStyleRule('color', preset.theme.colors.red[500]);

which would be quite cumbersome and time consuming, especially since some of these tests assert more than one Tailwind class.
Any tips or tools anyone knows of to make this sort of update less painful would be greatly appreciated 🙏

[ben-rogerson]

Hey there

I haven't gone through this proceedure before but I'd probably look at extending the test runner by a custom test function.

eg:

expect(element).toHaveTwStyle('text-red-500');

Then in that function, you could grab the style from the config (either directly from the preset or with twins theme import?)

That way you will have a better chance of using a find+replace on the current tests.

[DavidReinertToptal]

Would I be able to leverage the theme import in a test runner context? My test runner is jest if that matters

[ben-rogerson]

Nope as it currently needs to run with babel - I spoke wrongly before

[DavidReinertToptal]

Gotcha ok. Sounds like this isn’t a solved problem, which is good to know. I’ll dig into it and, if I generate anything useful that others can use I’ll be sure to post it here