<commit_before>## Jest Integration

[Jest Styled Components](https://github.com/styled-components/jest-styled-components) is a set of utilities for testing Styled Components with [Jest](https://github.com/facebook/jest). This package improves the snapshot testing experience and provides a brand new matcher to make expectations on the style rules.

### Installation

```
npm install --dev jest-styled-components
```

### Snapshot Testing

When we are building a UI with Styled Components, we want to make sure the output doesn't change unexpectedly. Snapshot testing is an excellent way to test React components, and this package makes the experience even more delightful by adding the style to the snapshots.

Here's an example of a test:

```jsx
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()
})
```

And here's an example of the resulting snapshot:
<commit_msg>docs(jest): fix npm install typo (#470)<commit_after>## Jest Integration

[Jest Styled Components](https://github.com/styled-components/jest-styled-components) is a set of utilities for testing Styled Components with [Jest](https://github.com/facebook/jest). This package improves the snapshot testing experience and provides a brand new matcher to make expectations on the style rules.

### Installation

```
npm install --save-dev jest-styled-components
```

### Snapshot Testing

When we are building a UI with Styled Components, we want to make sure the output doesn't change unexpectedly. Snapshot testing is an excellent way to test React components, and this package makes the experience even more delightful by adding the style to the snapshots.

Here's an example of a test:

```jsx
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()
})
```

And here's an example of the resulting snapshot:

{'fraction_non_alphanumeric': 0.0967741935483871, 'fraction_numerical': 0.0013256738842244808, 'mean_word_length': 4.880519480519481, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 7, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2939559', 'n_tokens_mistral': 651, 'n_tokens_neox': 604, 'n_words': 265}