Skip to content

Commit

Permalink
Include "jest-styled-components" in test framework script file
Browse files Browse the repository at this point in the history
This commit integrates jest-styled-components (1), a set of utilities
for testing "Styled Components" (2) with Jest () that improves the
napshot 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 (3).

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.

> Configuration

To enable this features the package is simply imported in the test
framework setup file defined in Jest's `setupTestFrameworkScriptFile`
field (GH-39).

> Custom Style Matcher

The custom `toHaveStyleRule` matcher (4) 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.

References:
  (1) https://github.com/styled-components/jest-styled-components
  (2) https://www.styled-components.com
  (3) https://jestjs.io
  (4) https://github.com/styled-components/jest-styled-components#tohavestylerule

Associated epics: GH-38
Associated issues: GH-39
GH-76
  • Loading branch information
arcticicestudio committed Dec 13, 2018
1 parent c9817ae commit ea3d9fc
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions test/setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
* @author Sven Greb <[email protected]>
* @see https://jestjs.io/docs/en/configuration
* @see https://www.gatsbyjs.org/docs/testing
* @see https://github.com/gnapse/jest-dom#custom-matchers
* @see https://github.com/styled-components/jest-styled-components#tohavestylerule
* @see https://www.styled-components.com/docs/tooling#jest-integration
* @since 0.1.0
*/

Expand All @@ -27,3 +30,12 @@ import "jest-dom/extend-expect";
* Automatically execute `afterEach(cleanup)` for each test.
*/
import "react-testing-library/cleanup-after-each";

/*
* Add support and utilities for testing styled-somponents with Jest.
*
* @see https://github.com/styled-components/jest-styled-components#tohavestylerule
* @see https://www.styled-components.com/docs/tooling#jest-integration
* @since 0.3.0
*/
import "jest-styled-components";

0 comments on commit ea3d9fc

Please sign in to comment.