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

Add snapshot testing FAQs #3425

Merged
merged 2 commits into from
May 2, 2017
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 44 additions & 6 deletions docs/SnapshotTesting.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ One such situation can arise if we intentionally change the address the Link com

```javascript
// Updated test case with a Link to a different address
it('renders correctly', () => {
it('renders correctly', () => {
const tree = renderer.create(
<Link page="http://www.instagram.com">Instagram</Link>
).toJSON();
Expand Down Expand Up @@ -93,11 +93,49 @@ Date.now = jest.fn(() => 1482363367071);

Now, every time the snapshot test case runs, `Date.now()` will return `1482363367071` consistently. This will result in the same snapshot being generated for this component regardless of when the test is run.

## React, React Native and Snapshot Testing
## Frequently Asked Questions

### Should the snapshot files be committed?

Yes, the snapshot files should be committed alongside the modules they are covering.
In fact, snapshots represent the state of the source modules at any given point in time.
In this way, when the source modules are modified, Jest can tell what changed from the previous version.

### Does snapshot testing work with React components only?

One of best use cases for snapshot testing is [React](/jest/docs/tutorial-react.html) and [React Native](/jest/docs/tutorial-react-native.html) components.
When engineers work with components, they want to make sure the rendered output doesn't change unexpectedly, and that's what snapshot testing is for.
However, snapshots can capture any serializable value and should be used anytime the goal is testing whether the output is correct.
Typical examples are [snapshotting CLI output](https://github.com/facebook/jest/blob/master/integration_tests/__tests__/console-test.js) or API responses.

### Does code coverage work with snapshots testing?

Yes, it works very well.

### What's the difference between snapshot testing and visual regression testing?

Snapshot testing and visual regression testing are two distinct ways of testing UIs, and they serve different purposes.
Visual regression testing tools take screenshots of web pages and compare the resulting images pixel by pixel.
With Snapshot testing values are serialized, stored within text files and compared using a diff algorithm.

### Does snapshot testing substitute unit testing?

The aim of snapshot testing is not replacing existing unit tests, but providing additional value and making testing painless.
In some scenarios, snapshot testing can potentially remove the need for unit testing for a particular set of functionalities (e.g. React components), but they can work together as well.

### What is the performance of snapshot testing regarding speed and size of the generated files?

Jest has been rewritten with performance in mind, and snapshot testing is not an exception. Since snapshots are stored within text files, this way of testing is fast and reliable.
You should be aware that Jest generates a new file for each test invoking the `toMatchSnapshot` matcher.
If used correctly, the size of the snapshots is pretty small, and it doesn't negatively affect your codebase.
For reference, the size of the snapshot files in the entire Jest codebase is less than 300 KB.

### How do I resolve conflicts within snapshot files?

As you've learned, snapshot testing was built to make it easier to write tests for React and React Native. Check out the [React tutorial](/jest/docs/tutorial-react.html) and the [React Native tutorial](/jest/docs/tutorial-react-native.html) to get started with snapshot testing on your React or React Native application.
Snapshot files must always represent the current state of the modules they are covering.
Therefore, if you are merging two branches and encounter a conflict in the snapshot files, the best solution is updating the snapshots to the latest version.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


## Additional Uses
### Is it possible to apply test-driven development principles with snapshot testing?

Snapshots can capture any serializable value. Common examples are [snapshotting CLI output](https://github.com/facebook/jest/blob/master/integration_tests/__tests__/console-test.js
) or API responses.
Although it would be possible to generate snapshot files manually, that's not the purpose of snapshot testing.
Snapshots help figuring out whether the output of the modules covered by tests is changed, rather than giving some guidance to design the code.