Jest utilities for Styled Components

[arcticicestudio]

Associated epics: #38
Associated issues: #39

This issue documents the integration of the jest-styled-components, a set of utilities for testing Styled Components with Jest that improves the snapshot testing experience and provides a brand new matcher to make expectations on the style rules.
This is the officially recommended library styled-components for Jest integration.

Instead of storing the generated class names in snapshots it allows to track the actual CSS rules and attributes for better comparison what changed and if the change is even really related to the affected component.

const Button = styled.button`
  color: red;
`

exports[`snapshot`] = `
<button
  className="sc-bdVaJa rOCEJ"
/>
`;

Before

- Snapshot
+ Received

 <button
-  className="sc-bdVaJa rOCEJ"
+  className="sc-bdVaJa hUzqNt"
 />

After

- Snapshot
+ Received

+.c0 {
+  color: green;
+}
+
 <button
-  className="sc-bdVaJa rOCEJ"
+  className="c0"
 />

Configuration

To enable this feature the package can simply being imported in the setup file defined in Jest's setupTestFrameworkScriptFile field implemented in #39.

import "jest-styled-components";

Custom Style Matcher

The custom toHaveStyleRule matcher is useful to test if a given rule is applied to a component. It will be added to the extended global except object when the main package file is being imported.

Tasks

• Install the required packages:
  • jest-styled-components
• Import the main package file into the defined Jest test framework script file (test/setup.js).
• Update existing and implement missing tests for style-only components.