From 61e388199766b4928913c6188773be7502a7069e Mon Sep 17 00:00:00 2001 From: George Buckingham Date: Tue, 12 Feb 2019 17:09:04 +0100 Subject: [PATCH 1/3] Fix image URLs Images were loaded from `/website/static/img/..`, which returns a 404. The correct path is `/img/..` --- CHANGELOG.md | 1 + docs/SnapshotTesting.md | 10 +++++----- website/versioned_docs/version-24.0/SnapshotTesting.md | 10 +++++----- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 24f72e8ba875..6204e25694e6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ ### Fixes - `[jest-cli]` Refactor `-o` and `--coverage` combined ([#7611](https://github.com/facebook/jest/pull/7611)) +- `[docs]` Fix image URLs in SnapshotTesting.md for current and version 24 ### Chore & Maintenance diff --git a/docs/SnapshotTesting.md b/docs/SnapshotTesting.md index c31926c68dd3..a79823ddf2b3 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 tests 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. @@ -64,7 +64,7 @@ it('renders correctly', () => { In that case, Jest will print this output: -![](/website/static/img/content/failedSnapshotTest.png) +![](/img/content/failedSnapshotTest.png) Since we just updated our component to point to a different address, it's reasonable to expect changes in the snapshot for this component. Our snapshot test case is failing because the snapshot for our updated component no longer matches the snapshot artifact for this test case. @@ -84,17 +84,17 @@ You can try out this functionality by cloning the [snapshot example](https://git Failed snapshots can also be updated interactively in watch mode: -![](/website/static/img/content/interactiveSnapshot.png) +![](/img/content/interactiveSnapshot.png) Once you enter Interactive Snapshot Mode, Jest will step you through the failed snapshots one test at a time and give you the opportunity to review the failed output. From here you can choose to update that snapshot or skip to the next: -![](/website/static/img/content/interactiveSnapshotUpdate.gif) +![](/img/content/interactiveSnapshotUpdate.gif) Once you're finished, Jest will give you a summary before returning back to watch mode: -![](/website/static/img/content/interactiveSnapshotDone.png) +![](/img/content/interactiveSnapshotDone.png) ### Inline Snapshots diff --git a/website/versioned_docs/version-24.0/SnapshotTesting.md b/website/versioned_docs/version-24.0/SnapshotTesting.md index df7c7ed847e3..a0d03dc57036 100644 --- a/website/versioned_docs/version-24.0/SnapshotTesting.md +++ b/website/versioned_docs/version-24.0/SnapshotTesting.md @@ -42,7 +42,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 tests 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. @@ -65,7 +65,7 @@ it('renders correctly', () => { In that case, Jest will print this output: -![](/website/static/img/content/failedSnapshotTest.png) +![](/img/content/failedSnapshotTest.png) Since we just updated our component to point to a different address, it's reasonable to expect changes in the snapshot for this component. Our snapshot test case is failing because the snapshot for our updated component no longer matches the snapshot artifact for this test case. @@ -85,17 +85,17 @@ You can try out this functionality by cloning the [snapshot example](https://git Failed snapshots can also be updated interactively in watch mode: -![](/website/static/img/content/interactiveSnapshot.png) +![](/img/content/interactiveSnapshot.png) Once you enter Interactive Snapshot Mode, Jest will step you through the failed snapshots one test at a time and give you the opportunity to review the failed output. From here you can choose to update that snapshot or skip to the next: -![](/website/static/img/content/interactiveSnapshotUpdate.gif) +![](/img/content/interactiveSnapshotUpdate.gif) Once you're finished, Jest will give you a summary before returning back to watch mode: -![](/website/static/img/content/interactiveSnapshotDone.png) +![](/img/content/interactiveSnapshotDone.png) ### Inline Snapshots From 8a8bfc1758833085fc3863fdfd6f027dddf48f33 Mon Sep 17 00:00:00 2001 From: George Buckingham Date: Tue, 12 Feb 2019 17:22:30 +0100 Subject: [PATCH 2/3] Fix md lint error --- docs/SnapshotTesting.md | 3 +-- website/versioned_docs/version-24.0/SnapshotTesting.md | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/SnapshotTesting.md b/docs/SnapshotTesting.md index a79823ddf2b3..8f0d3b0c6be4 100644 --- a/docs/SnapshotTesting.md +++ b/docs/SnapshotTesting.md @@ -41,8 +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`. -> Also, Rendering the same component with different props in other snapshot tests will not affect the first one, as the tests don't know about each other. +> 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 tests 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. diff --git a/website/versioned_docs/version-24.0/SnapshotTesting.md b/website/versioned_docs/version-24.0/SnapshotTesting.md index a0d03dc57036..072efda901b8 100644 --- a/website/versioned_docs/version-24.0/SnapshotTesting.md +++ b/website/versioned_docs/version-24.0/SnapshotTesting.md @@ -42,8 +42,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`. -> Also, Rendering the same component with different props in other snapshot tests will not affect the first one, as the tests don't know about each other. +> 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 tests 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 918f9ceb56e56217e2300107ac20967269fe9130 Mon Sep 17 00:00:00 2001 From: George Buckingham Date: Tue, 12 Feb 2019 20:47:36 +0100 Subject: [PATCH 3/3] Move changelog entry to Chores & Maintenance section --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6204e25694e6..872870ca9577 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,6 @@ ### Fixes - `[jest-cli]` Refactor `-o` and `--coverage` combined ([#7611](https://github.com/facebook/jest/pull/7611)) -- `[docs]` Fix image URLs in SnapshotTesting.md for current and version 24 ### Chore & Maintenance @@ -29,6 +28,7 @@ - `[jest-mock]`: Migrate to TypeScript ([#7847](https://github.com/facebook/jest/pull/7847), [#7850](https://github.com/facebook/jest/pull/7850)) - `[jest-worker]`: Migrate to TypeScript ([#7853](https://github.com/facebook/jest/pull/7853)) - `[jest-haste-map]`: Migrate to TypeScript ([#7854](https://github.com/facebook/jest/pull/7854)) +- `[docs]`: Fix image paths in SnapshotTesting.md for current and version 24 ([#7872](https://github.com/facebook/jest/pull/7872)) ### Performance