https://github.com/pauldcomanici/jest-serializer-functions
Jest serializer for functions
https://github.com/pauldcomanici/jest-serializer-functions
jest jest-serializer jest-serializer-functions unit-testing
Last synced: 6 months ago
JSON representation
Jest serializer for functions
- Host: GitHub
- URL: https://github.com/pauldcomanici/jest-serializer-functions
- Owner: pauldcomanici
- License: mit
- Created: 2018-11-19T20:01:12.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:21:43.000Z (over 3 years ago)
- Last Synced: 2025-08-09T08:56:28.742Z (11 months ago)
- Topics: jest, jest-serializer, jest-serializer-functions, unit-testing
- Language: JavaScript
- Size: 1.24 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 45
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# jest-serializer-functions
Jest snapshot serializer for functions. Read more about [snapshotSerializers](https://jestjs.io/docs/en/configuration.html#snapshotserializers-array-string)
## Background
Whenever you are using Jest for snapshot you may notice that functions will appear in snapshots in different ways.
If the function is mocked you will see it as:
* `[Function]`
* when the function is not mocked with Jest
* when you have React component that has a function inside JSX (consumers)
* `[MockFunction]`
* when the function is mocked with jest, usually implementation is: `myFn = jest.fn()`
* `[MockFunction <>]`
* where `<>` is the name of the function
* ```[MockFunction] {calls: [] results: []}```
* when the mocked function was called previously
### How it works
This serializer will help you have a more consistent way of viewing functions as every time will return `[Function]` as the base.
If the function has a name it will serialize it as `[Function] <>`.
As the part where the function is mocked or not just adds noise to the important part.
Now the good part :astonished: is when you are using this serialiser
with (React)[https://www.npmjs.com/package/react] (and [enzyme](https://www.npmjs.com/package/enzyme))
as it will improve what you can see in the snapshot. Take as example source code:
```jsx
{
(handler) => (
)
}
```
this will result in a snapshot that will look like:
```jsx
[Function]
```
I would not say this is very helpful (if I change something from the function nothing will break in my snapshot).
This serializer will return:
```jsx
() => ()
```
## Installation
```sh
npm install --save-dev jest-serializer-functions
```
Or if you are using [yarn](https://yarnpkg.com/en/)
```sh
yarn add --dev jest-serializer-functions
```
## Usage
### Having jest config as json
```json
// jest.json
{
...
"snapshotSerializers": [
"jest-serializer-functions"
],
...
}
```
### Having jest config as json inside package.json
```json
// package.json
{
...
"jest": {
...
"snapshotSerializers": [
"jest-serializer-functions"
],
...
},
...
}
```
## Take into consideration
> Everything has pros & cons.
### Pros
This serializer will help you with a better understanding of your functions and fail tests that until now passed when doing partial refactoring.
### Cons
The time to execute your tests will increase (depending on how many snapshots you have like this).
The space used by snapshot will increase, as more data will be stored.
## Contributing
Pull requests and issues are welcome :heart:.