Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jest utilities for Styled Components #77

Merged

Conversation

arcticicestudio
Copy link
Contributor

Resolves #76

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
Instead of returning a simple object with the default `ReactComponent`
key the mock now returns an real `<svg>` React component.

GH-76
This improves the configuratibility and simplifies the testing.

GH-76
@codecov
Copy link

codecov bot commented Dec 15, 2018

Codecov Report

Merging #77 into develop will increase coverage by 5.17%.
The diff coverage is 100%.

Impacted file tree graph

@@             Coverage Diff             @@
##           develop      #77      +/-   ##
===========================================
+ Coverage     70.2%   75.37%   +5.17%     
===========================================
  Files           54       54              
  Lines          198      199       +1     
  Branches        34       34              
===========================================
+ Hits           139      150      +11     
+ Misses          59       49      -10
Flag Coverage Δ
#unit 75.37% <100%> (+5.17%) ⬆️
Impacted Files Coverage Δ
.../components/organisms/core/Header/shared/styles.js 100% <100%> (ø) ⬆️
...c/components/organisms/core/Header/styled/Logo.jsx 100% <100%> (+66.66%) ⬆️
...s/organisms/core/Header/styled/SlideMenuToggle.jsx 100% <0%> (+50%) ⬆️
...components/organisms/core/Header/styled/Header.jsx 100% <0%> (+50%) ⬆️
...omponents/organisms/core/Header/styled/NavList.jsx 100% <0%> (+50%) ⬆️
.../organisms/core/Header/styled/TopContentPusher.jsx 100% <0%> (+50%) ⬆️
...nents/organisms/core/Header/styled/LogoCaption.jsx 100% <0%> (+50%) ⬆️
...ents/organisms/core/Header/styled/SlideMenuBox.jsx 100% <0%> (+66.66%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d6f0fef...c713544. Read the comment docs.

@arcticicestudio arcticicestudio merged commit 47010b8 into develop Dec 15, 2018
@arcticicestudio arcticicestudio deleted the feature/gh-76-jest-utilities-for-styled-components branch December 15, 2018 10:43
@arcticicestudio arcticicestudio removed their assignment Dec 15, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants