![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@festicket/jest-styled-components
Advanced tools
Readme
A set of utilities for testing Styled Components with Jest. This package improves the snapshot testing experience and provides a brand new matcher to make expectations on the style rules.
yarn add --dev jest-styled-components
import React from 'react'
import styled from 'styled-components'
import renderer from 'react-test-renderer'
import 'jest-styled-components'
const Button = styled.button`
color: red;
`
test('it works', () => {
const tree = renderer.create(<Button />).toJSON()
expect(tree).toMatchSnapshot()
expect(tree).toHaveStyleRule('color', 'red')
})
Jest snapshot testing is an excellent way to test React components (or any serializable value) and make sure things don't change unexpectedly. It works with Styled Components but there are a few problems that this package addresses and solves.
For example, suppose we create this styled Button:
import styled from 'styled-components'
const Button = styled.button`
color: red;
`
Which we cover with the following test:
import React from 'react'
import renderer from 'react-test-renderer'
test('it works', () => {
const tree = renderer.create(<Button />).toJSON()
expect(tree).toMatchSnapshot()
})
When we run our test command, Jest generates a snapshot containing a few class names (which we didn't set) and no information about the style rules:
exports[`it works 1`] = `
<button
className="sc-bdVaJa rOCEJ"
/>
`;
Consequently, changing the color to green:
const Button = styled.button`
color: green;
`
Results in the following diff, where Jest can only tell us that the class names are changed. Although we can assume that if the class names are changed the style rules are also changed, this is not optimal (and is not always true).
- Snapshot
+ Received
<button
- className="sc-bdVaJa rOCEJ"
+ className="sc-bdVaJa hUzqNt"
/>
Here's where Jest Styled Components comes to rescue.
We just import the package into our test file:
import 'jest-styled-components'
When we rerun the test, the output is different: the style rules are included in the snapshot, and the hashed class names are substituted with placeholders that make the diffs less noisy:
- Snapshot
+ Received
+.c0 {
+ color: green;
+}
+
<button
- className="sc-bdVaJa rOCEJ"
+ className="c0"
/>
This is the resulting snapshot:
exports[`it works 1`] = `
.c0 {
color: green;
}
<button
className="c0"
/>
`;
Now, suppose we change the color again to blue:
const Button = styled.button`
color: blue;
`
Thanks to Jest Styled Components, Jest is now able to provide the exact information and make our testing experience even more delightful 💖:
- Snapshot
+ Received
.c0 {
- color: green;
+ color: blue;
}
<button
className="c0"
/>
enzyme-to-json is necessary to generate snapshots using Enzyme's shallow or full DOM rendering.
yarn add --dev enzyme-to-json
It can be enabled globally in the package.json
:
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
}
Or imported in each test:
import toJson from 'enzyme-to-json'
// ...
expect(toJson(wrapper)).toMatchSnapshot()
Jest Styled Components works with shallow rendering:
import { shallow } from 'enzyme'
test('it works', () => {
const wrapper = shallow(<Button />)
expect(wrapper).toMatchSnapshot()
})
And full DOM rendering as well:
import { mount } from 'enzyme'
test('it works', () => {
const wrapper = mount(<Button />)
expect(wrapper).toMatchSnapshot()
})
In some scenario, testing components that depend on a theme can be tricky, especially when using Enzyme's shallow rendering.
For example:
const Button = styled.button`
color: ${props => props.theme.main};
`
const theme = {
main: 'mediumseagreen',
}
The recommended solution is to pass the theme as a prop:
const wrapper = shallow(<Button theme={theme} />)
The following function might also help:
const shallowWithTheme = (tree, theme) => {
const context = shallow(<ThemeProvider theme={theme} />)
.instance()
.getChildContext()
return shallow(tree, { context })
}
const wrapper = shallowWithTheme(<Button />, theme)
To generate snapshots of Preact components, add the following configuration:
"jest": {
"moduleNameMapper": {
"^react$": "preact-compat"
}
}
And render the components with preact-render-to-json:
import React from 'react'
import styled from 'styled-components'
import render from 'preact-render-to-json'
import 'jest-styled-components'
const Button = styled.button`
color: red;
`
test('it works', () => {
const tree = render(<Button />)
expect(tree).toMatchSnapshot()
})
The snapshots will contain
class
instead ofclassName
. Learn more.
The toHaveStyleRule
matcher is useful to test if a given rule is applied to a component.
The first argument is the expected property, the second is the expected value (string or RegExp).
test('it works', () => {
const tree = renderer.create(<Button />).toJSON()
expect(tree).toHaveStyleRule('color', 'red')
})
The matcher supports a third options
parameter which makes it possible to search for rules nested within an At-rule (media) or to add modifiers to the class selector. This feature is supported in React only, and more options are coming soon.
const Button = styled.button`
@media (max-width: 640px) {
&:hover {
color: red;
}
}
`
test('it works', () => {
const tree = renderer.create(<Button />).toJSON()
expect(tree).toHaveStyleRule('color', 'red', {
media: '(max-width:640px)',
modifier: ':hover',
})
})
This matcher works with trees serialized with react-test-renderer
and shallow renderered or mounted with Enzyme.
It checks the style rules applied to the root component it receives, therefore to make assertions on components further in the tree they must be provided separately (Enzyme's find might help).
To use the toHaveStyleRule
matcher with React Native, change the import statement to:
import 'jest-styled-components/native'
It is possibile to setup this package for all the tests using the setupTestFrameworkScriptFile option:
"jest": {
"setupTestFrameworkScriptFile": "./setupTest.js"
}
And import the library once in the setupTest.js
as follows:
import 'jest-styled-components'
To use this package with styled-components < v2 (e.g. v1.4.6) the following annotation must be added at the top of the test files. Consequently, it won't be possible to use Enzyme's full DOM rendering.
/**
* @jest-environment node
*/
Please open an issue and discuss with us before submitting a PR.
FAQs
Jest utilities for Styled Components
The npm package @festicket/jest-styled-components receives a total of 0 weekly downloads. As such, @festicket/jest-styled-components popularity was classified as not popular.
We found that @festicket/jest-styled-components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.