From 9007cf4f52351a27459f65ae348ba0962011d529 Mon Sep 17 00:00:00 2001 From: Kalpesh Singh Date: Sun, 22 Jul 2018 19:06:50 +0530 Subject: [PATCH 1/3] Updates SnapshotTesting.md to provide more info. on snapshot scope The doc doesn't mention where to look for the bugs in the code. I have added extra info. which will clear things to find the bugs and why does test pass when you doesn't add any props in the component used in different files. As a beginner I thought, test will fail if I change Link component props in the any file that usage test component (in this case Link component). --- docs/SnapshotTesting.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/SnapshotTesting.md b/docs/SnapshotTesting.md index 9b79f7035548..9dc85e51f4a7 100644 --- a/docs/SnapshotTesting.md +++ b/docs/SnapshotTesting.md @@ -39,7 +39,10 @@ exports[`renders correctly 1`] = ` `; ``` -The snapshot artifact should be committed alongside code changes, and reviewed as part of your code review process. Jest uses [pretty-format](https://github.com/facebook/jest/tree/master/packages/pretty-format) to make snapshots human-readable during code review. On subsequent test runs Jest will simply compare the rendered output with the previous snapshot. If they match, the test will pass. If they don't match, either the test runner found a bug in your code that should be fixed, or the implementation has changed and the snapshot needs to be updated. +The snapshot artifact should be committed alongside code changes, and reviewed as part of your code review process. Jest uses [pretty-format](https://github.com/facebook/jest/tree/master/packages/pretty-format) to make snapshots human-readable during code review. On subsequent test runs Jest will simply compare the rendered output with the previous snapshot. If they match, the test will pass. If they don't match, either the test runner found a bug in your code (in this case, it's `` component) that should be fixed, or the implementation has changed and the snapshot needs to be updated. + +> Note: The snapshot is directly scoped to the data you render – in our example it's component with page prop passed to it. This implies that even if any other file has missing props (Say, `App.js`) in the `` component, it will still pass the test as the test doesn't know the usage of `` component and it's scoped only to the `Link.react.js`. +> Also, Rendering the same component with different props in other snapshot test will not affect the first one, as the tests don't know about each other. More information on how snapshot testing works and why we built it can be found on the [release blog post](https://jestjs.io/blog/2016/07/27/jest-14.html). We recommend reading [this blog post](http://benmccormick.org/2016/09/19/testing-with-jest-snapshots-first-impressions/) to get a good sense of when you should use snapshot testing. We also recommend watching this [egghead video](https://egghead.io/lessons/javascript-use-jest-s-snapshot-testing-feature?pl=testing-javascript-with-jest-a36c4074) on Snapshot Testing with Jest. From 4fa64e42ad9482a8743beb5942d7e457ae11799c Mon Sep 17 00:00:00 2001 From: Kalpesh Singh Date: Mon, 23 Jul 2018 07:28:06 +0530 Subject: [PATCH 2/3] Lints file --- docs/SnapshotTesting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/SnapshotTesting.md b/docs/SnapshotTesting.md index 9dc85e51f4a7..884c9ae2f85e 100644 --- a/docs/SnapshotTesting.md +++ b/docs/SnapshotTesting.md @@ -41,7 +41,7 @@ exports[`renders correctly 1`] = ` The snapshot artifact should be committed alongside code changes, and reviewed as part of your code review process. Jest uses [pretty-format](https://github.com/facebook/jest/tree/master/packages/pretty-format) to make snapshots human-readable during code review. On subsequent test runs Jest will simply compare the rendered output with the previous snapshot. If they match, the test will pass. If they don't match, either the test runner found a bug in your code (in this case, it's `` component) that should be fixed, or the implementation has changed and the snapshot needs to be updated. -> Note: The snapshot is directly scoped to the data you render – in our example it's component with page prop passed to it. This implies that even if any other file has missing props (Say, `App.js`) in the `` component, it will still pass the test as the test doesn't know the usage of `` component and it's scoped only to the `Link.react.js`. +> Note: The snapshot is directly scoped to the data you render – in our example it's component with page prop passed to it. This implies that even if any other file has missing props (Say, `App.js`) in the `` component, it will still pass the test as the test doesn't know the usage of `` component and it's scoped only to the `Link.react.js`. > Also, Rendering the same component with different props in other snapshot test will not affect the first one, as the tests don't know about each other. More information on how snapshot testing works and why we built it can be found on the [release blog post](https://jestjs.io/blog/2016/07/27/jest-14.html). We recommend reading [this blog post](http://benmccormick.org/2016/09/19/testing-with-jest-snapshots-first-impressions/) to get a good sense of when you should use snapshot testing. We also recommend watching this [egghead video](https://egghead.io/lessons/javascript-use-jest-s-snapshot-testing-feature?pl=testing-javascript-with-jest-a36c4074) on Snapshot Testing with Jest. From fa02b5c620d94aec5aeb646d8179d1e46e3b88ef Mon Sep 17 00:00:00 2001 From: Kalpesh Singh Date: Mon, 23 Jul 2018 07:32:14 +0530 Subject: [PATCH 3/3] Calls out code --- docs/SnapshotTesting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/SnapshotTesting.md b/docs/SnapshotTesting.md index 884c9ae2f85e..3e31fc3c6cd4 100644 --- a/docs/SnapshotTesting.md +++ b/docs/SnapshotTesting.md @@ -41,7 +41,7 @@ exports[`renders correctly 1`] = ` The snapshot artifact should be committed alongside code changes, and reviewed as part of your code review process. Jest uses [pretty-format](https://github.com/facebook/jest/tree/master/packages/pretty-format) to make snapshots human-readable during code review. On subsequent test runs Jest will simply compare the rendered output with the previous snapshot. If they match, the test will pass. If they don't match, either the test runner found a bug in your code (in this case, it's `` component) that should be fixed, or the implementation has changed and the snapshot needs to be updated. -> Note: The snapshot is directly scoped to the data you render – in our example it's component with page prop passed to it. This implies that even if any other file has missing props (Say, `App.js`) in the `` component, it will still pass the test as the test doesn't know the usage of `` component and it's scoped only to the `Link.react.js`. +> Note: The snapshot is directly scoped to the data you render – in our example it's `` component with page prop passed to it. This implies that even if any other file has missing props (Say, `App.js`) in the `` component, it will still pass the test as the test doesn't know the usage of `` component and it's scoped only to the `Link.react.js`. > Also, Rendering the same component with different props in other snapshot test will not affect the first one, as the tests don't know about each other. More information on how snapshot testing works and why we built it can be found on the [release blog post](https://jestjs.io/blog/2016/07/27/jest-14.html). We recommend reading [this blog post](http://benmccormick.org/2016/09/19/testing-with-jest-snapshots-first-impressions/) to get a good sense of when you should use snapshot testing. We also recommend watching this [egghead video](https://egghead.io/lessons/javascript-use-jest-s-snapshot-testing-feature?pl=testing-javascript-with-jest-a36c4074) on Snapshot Testing with Jest.