Skip to content

Commit

Permalink
Initial documentation with example of Output mapping feature
Browse files Browse the repository at this point in the history
  • Loading branch information
hisapy committed Mar 14, 2019
1 parent df30a5a commit bcaa151
Showing 1 changed file with 35 additions and 2 deletions.
37 changes: 35 additions & 2 deletions docs/map.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,38 @@
# Output mapping feature

You can pass a function as the `map` option to have full control over your snapshot output.
You can pass a function as the `map` option to have full control over your snapshot output. The function will traverse each node of your _wrapper_ tree recursively.

* Documentation coming soon *
## Example

Use `map` to remove `containerInfo` prop from `Portal` components to avoid brittle snapshots.

```javascript
const removePortalContainerInfo = json => {
if (json.type === "Portal") {
return {
...json,
props: {
...json.props,
containerInfo: undefined
}
};
}
return json;
};

// Mount a component that might render a portal
const wrapper = mount(MyComponent);

// Then in your matcher

expect(
toJson(wrapper, {
mode: "deep",
map: wrapper.exists("Portal") && removePortalContainerInfo
})
).toMatchSpecificSnapshot(snapshotFilename);
```

Now these snapshots are solid.

This example was extracted from a project using Material UI and the snapshot is actually a StoryShot. Before using the `map` function `containerInfo` was randomly set with body and spans apparently coming from Storybook markup.

0 comments on commit bcaa151

Please sign in to comment.