From 893a640faf39720fa1abd643ac5a37c032faa768 Mon Sep 17 00:00:00 2001 From: Nicolas Charpentier Date: Thu, 6 Jan 2022 15:28:33 +0000 Subject: [PATCH 1/2] Refactor docs and website --- docs/SnapshotTesting.md | 8 ++++---- docs/TutorialReact.md | 2 +- website/blog/2016-07-27-jest-14.md | 4 ++-- website/versioned_docs/version-25.x/SnapshotTesting.md | 10 +++++----- website/versioned_docs/version-25.x/TutorialReact.md | 2 +- website/versioned_docs/version-26.x/SnapshotTesting.md | 6 +++--- website/versioned_docs/version-26.x/TutorialReact.md | 2 +- website/versioned_docs/version-27.0/SnapshotTesting.md | 6 +++--- website/versioned_docs/version-27.0/TutorialReact.md | 2 +- website/versioned_docs/version-27.1/SnapshotTesting.md | 6 +++--- website/versioned_docs/version-27.1/TutorialReact.md | 2 +- website/versioned_docs/version-27.2/SnapshotTesting.md | 6 +++--- website/versioned_docs/version-27.2/TutorialReact.md | 2 +- website/versioned_docs/version-27.4/SnapshotTesting.md | 6 +++--- website/versioned_docs/version-27.4/TutorialReact.md | 2 +- 15 files changed, 33 insertions(+), 33 deletions(-) diff --git a/docs/SnapshotTesting.md b/docs/SnapshotTesting.md index 4222621f2219..73966e7f4d63 100644 --- a/docs/SnapshotTesting.md +++ b/docs/SnapshotTesting.md @@ -9,12 +9,12 @@ A typical snapshot test case renders a UI component, takes a snapshot, then comp ## Snapshot Testing with Jest -A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/link.react.test.js) for a [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.react.js): +A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/link.test.js) for a [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.js): ```tsx import React from 'react'; import renderer from 'react-test-renderer'; -import Link from '../Link.react'; +import Link from '../Link'; it('renders correctly', () => { const tree = renderer @@ -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/main/packages/pretty-format) to make snapshots human-readable during code review. On subsequent test runs, Jest will 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 the `` component in this case) 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 the `` 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 the `` 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.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](/blog/2016/07/27/jest-14). 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. @@ -227,7 +227,7 @@ The goal is to make it easy to review snapshots in pull requests, and fight agai Your tests should be deterministic. Running the same tests multiple times on a component that has not changed should produce the same results every time. You're responsible for making sure your generated snapshots do not include platform specific or other non-deterministic data. -For example, if you have a [Clock](https://github.com/facebook/jest/blob/main/examples/snapshot/Clock.react.js) component that uses `Date.now()`, the snapshot generated from this component will be different every time the test case is run. In this case we can [mock the Date.now() method](MockFunctions.md) to return a consistent value every time the test is run: +For example, if you have a [Clock](https://github.com/facebook/jest/blob/main/examples/snapshot/Clock.js) component that uses `Date.now()`, the snapshot generated from this component will be different every time the test case is run. In this case we can [mock the Date.now() method](MockFunctions.md) to return a consistent value every time the test is run: ```js Date.now = jest.fn(() => 1482363367071); diff --git a/docs/TutorialReact.md b/docs/TutorialReact.md index 5fcfa52a098b..9b5ce3d25b88 100644 --- a/docs/TutorialReact.md +++ b/docs/TutorialReact.md @@ -58,7 +58,7 @@ module.exports = { Let's create a [snapshot test](SnapshotTesting.md) for a Link component that renders hyperlinks: -```tsx title="Link.react.js" +```tsx title="Link.js" import React, {useState} from 'react'; const STATUS = { diff --git a/website/blog/2016-07-27-jest-14.md b/website/blog/2016-07-27-jest-14.md index 47f8d97a4838..27786ef5db6e 100644 --- a/website/blog/2016-07-27-jest-14.md +++ b/website/blog/2016-07-27-jest-14.md @@ -11,7 +11,7 @@ One of the big open questions was how to write React tests efficiently. There ar -Together with the React team we created a new test renderer for React and added snapshot testing to Jest. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/Link.react-test.js) for a simple [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.react.js): +Together with the React team we created a new test renderer for React and added snapshot testing to Jest. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/Link.test.js) for a simple [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.js): ```javascript import renderer from 'react-test-renderer'; @@ -23,7 +23,7 @@ test('Link renders correctly', () => { }); ``` -The first time this test is run, Jest creates a [snapshot file](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/__snapshots__/Link.react-test.js.snap) that looks like this: +The first time this test is run, Jest creates a [snapshot file](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/__snapshots__/Link.test.js.snap) that looks like this: ```javascript exports[`Link renders correctly 1`] = ` diff --git a/website/versioned_docs/version-25.x/SnapshotTesting.md b/website/versioned_docs/version-25.x/SnapshotTesting.md index 7cdc045d0446..098999f03736 100644 --- a/website/versioned_docs/version-25.x/SnapshotTesting.md +++ b/website/versioned_docs/version-25.x/SnapshotTesting.md @@ -9,12 +9,12 @@ A typical snapshot test case renders a UI component, takes a snapshot, then comp ## Snapshot Testing with Jest -A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/link.react.test.js) for a [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.react.js): +A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/link.test.js) for a [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.js): ```tsx import React from 'react'; import renderer from 'react-test-renderer'; -import Link from '../Link.react'; +import Link from '../Link'; it('renders correctly', () => { const tree = renderer @@ -24,7 +24,7 @@ it('renders correctly', () => { }); ``` -The first time this test is run, Jest creates a [snapshot file](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/__snapshots__/link.react.test.js.snap) that looks like this: +The first time this test is run, Jest creates a [snapshot file](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/__snapshots__/link.test.js.snap) that looks like this: ```javascript exports[`renders correctly 1`] = ` @@ -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/main/packages/pretty-format) to make snapshots human-readable during code review. On subsequent test runs, Jest will 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 the `` component in this case) 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 the `` 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 the `` 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.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). 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. @@ -231,7 +231,7 @@ The goal is to make it easy to review snapshots in pull requests, and fight agai Your tests should be deterministic. Running the same tests multiple times on a component that has not changed should produce the same results every time. You're responsible for making sure your generated snapshots do not include platform specific or other non-deterministic data. -For example, if you have a [Clock](https://github.com/facebook/jest/blob/main/examples/snapshot/Clock.react.js) component that uses `Date.now()`, the snapshot generated from this component will be different every time the test case is run. In this case we can [mock the Date.now() method](MockFunctions.md) to return a consistent value every time the test is run: +For example, if you have a [Clock](https://github.com/facebook/jest/blob/main/examples/snapshot/Clock.js) component that uses `Date.now()`, the snapshot generated from this component will be different every time the test case is run. In this case we can [mock the Date.now() method](MockFunctions.md) to return a consistent value every time the test is run: ```js Date.now = jest.fn(() => 1482363367071); diff --git a/website/versioned_docs/version-25.x/TutorialReact.md b/website/versioned_docs/version-25.x/TutorialReact.md index 39d0eaa01018..5cb37d5a8a51 100644 --- a/website/versioned_docs/version-25.x/TutorialReact.md +++ b/website/versioned_docs/version-25.x/TutorialReact.md @@ -58,7 +58,7 @@ module.exports = { Let's create a [snapshot test](SnapshotTesting.md) for a Link component that renders hyperlinks: -```tsx title="Link.react.js" +```tsx title="Link.js" import React, {useState} from 'react'; const STATUS = { diff --git a/website/versioned_docs/version-26.x/SnapshotTesting.md b/website/versioned_docs/version-26.x/SnapshotTesting.md index 7cdc045d0446..887232836dac 100644 --- a/website/versioned_docs/version-26.x/SnapshotTesting.md +++ b/website/versioned_docs/version-26.x/SnapshotTesting.md @@ -9,7 +9,7 @@ A typical snapshot test case renders a UI component, takes a snapshot, then comp ## Snapshot Testing with Jest -A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/link.react.test.js) for a [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.react.js): +A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/link.react.test.js) for a [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.js): ```tsx import React from 'react'; @@ -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/main/packages/pretty-format) to make snapshots human-readable during code review. On subsequent test runs, Jest will 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 the `` component in this case) 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 the `` 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 the `` 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.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). 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. @@ -231,7 +231,7 @@ The goal is to make it easy to review snapshots in pull requests, and fight agai Your tests should be deterministic. Running the same tests multiple times on a component that has not changed should produce the same results every time. You're responsible for making sure your generated snapshots do not include platform specific or other non-deterministic data. -For example, if you have a [Clock](https://github.com/facebook/jest/blob/main/examples/snapshot/Clock.react.js) component that uses `Date.now()`, the snapshot generated from this component will be different every time the test case is run. In this case we can [mock the Date.now() method](MockFunctions.md) to return a consistent value every time the test is run: +For example, if you have a [Clock](https://github.com/facebook/jest/blob/main/examples/snapshot/Clock.js) component that uses `Date.now()`, the snapshot generated from this component will be different every time the test case is run. In this case we can [mock the Date.now() method](MockFunctions.md) to return a consistent value every time the test is run: ```js Date.now = jest.fn(() => 1482363367071); diff --git a/website/versioned_docs/version-26.x/TutorialReact.md b/website/versioned_docs/version-26.x/TutorialReact.md index 39d0eaa01018..5cb37d5a8a51 100644 --- a/website/versioned_docs/version-26.x/TutorialReact.md +++ b/website/versioned_docs/version-26.x/TutorialReact.md @@ -58,7 +58,7 @@ module.exports = { Let's create a [snapshot test](SnapshotTesting.md) for a Link component that renders hyperlinks: -```tsx title="Link.react.js" +```tsx title="Link.js" import React, {useState} from 'react'; const STATUS = { diff --git a/website/versioned_docs/version-27.0/SnapshotTesting.md b/website/versioned_docs/version-27.0/SnapshotTesting.md index 4222621f2219..fa1639e2eebd 100644 --- a/website/versioned_docs/version-27.0/SnapshotTesting.md +++ b/website/versioned_docs/version-27.0/SnapshotTesting.md @@ -9,7 +9,7 @@ A typical snapshot test case renders a UI component, takes a snapshot, then comp ## Snapshot Testing with Jest -A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/link.react.test.js) for a [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.react.js): +A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/link.react.test.js) for a [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.js): ```tsx import React from 'react'; @@ -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/main/packages/pretty-format) to make snapshots human-readable during code review. On subsequent test runs, Jest will 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 the `` component in this case) 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 the `` 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 the `` 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.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](/blog/2016/07/27/jest-14). 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. @@ -227,7 +227,7 @@ The goal is to make it easy to review snapshots in pull requests, and fight agai Your tests should be deterministic. Running the same tests multiple times on a component that has not changed should produce the same results every time. You're responsible for making sure your generated snapshots do not include platform specific or other non-deterministic data. -For example, if you have a [Clock](https://github.com/facebook/jest/blob/main/examples/snapshot/Clock.react.js) component that uses `Date.now()`, the snapshot generated from this component will be different every time the test case is run. In this case we can [mock the Date.now() method](MockFunctions.md) to return a consistent value every time the test is run: +For example, if you have a [Clock](https://github.com/facebook/jest/blob/main/examples/snapshot/Clock.js) component that uses `Date.now()`, the snapshot generated from this component will be different every time the test case is run. In this case we can [mock the Date.now() method](MockFunctions.md) to return a consistent value every time the test is run: ```js Date.now = jest.fn(() => 1482363367071); diff --git a/website/versioned_docs/version-27.0/TutorialReact.md b/website/versioned_docs/version-27.0/TutorialReact.md index 5fcfa52a098b..9b5ce3d25b88 100644 --- a/website/versioned_docs/version-27.0/TutorialReact.md +++ b/website/versioned_docs/version-27.0/TutorialReact.md @@ -58,7 +58,7 @@ module.exports = { Let's create a [snapshot test](SnapshotTesting.md) for a Link component that renders hyperlinks: -```tsx title="Link.react.js" +```tsx title="Link.js" import React, {useState} from 'react'; const STATUS = { diff --git a/website/versioned_docs/version-27.1/SnapshotTesting.md b/website/versioned_docs/version-27.1/SnapshotTesting.md index 4222621f2219..fa1639e2eebd 100644 --- a/website/versioned_docs/version-27.1/SnapshotTesting.md +++ b/website/versioned_docs/version-27.1/SnapshotTesting.md @@ -9,7 +9,7 @@ A typical snapshot test case renders a UI component, takes a snapshot, then comp ## Snapshot Testing with Jest -A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/link.react.test.js) for a [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.react.js): +A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/link.react.test.js) for a [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.js): ```tsx import React from 'react'; @@ -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/main/packages/pretty-format) to make snapshots human-readable during code review. On subsequent test runs, Jest will 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 the `` component in this case) 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 the `` 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 the `` 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.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](/blog/2016/07/27/jest-14). 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. @@ -227,7 +227,7 @@ The goal is to make it easy to review snapshots in pull requests, and fight agai Your tests should be deterministic. Running the same tests multiple times on a component that has not changed should produce the same results every time. You're responsible for making sure your generated snapshots do not include platform specific or other non-deterministic data. -For example, if you have a [Clock](https://github.com/facebook/jest/blob/main/examples/snapshot/Clock.react.js) component that uses `Date.now()`, the snapshot generated from this component will be different every time the test case is run. In this case we can [mock the Date.now() method](MockFunctions.md) to return a consistent value every time the test is run: +For example, if you have a [Clock](https://github.com/facebook/jest/blob/main/examples/snapshot/Clock.js) component that uses `Date.now()`, the snapshot generated from this component will be different every time the test case is run. In this case we can [mock the Date.now() method](MockFunctions.md) to return a consistent value every time the test is run: ```js Date.now = jest.fn(() => 1482363367071); diff --git a/website/versioned_docs/version-27.1/TutorialReact.md b/website/versioned_docs/version-27.1/TutorialReact.md index 5fcfa52a098b..9b5ce3d25b88 100644 --- a/website/versioned_docs/version-27.1/TutorialReact.md +++ b/website/versioned_docs/version-27.1/TutorialReact.md @@ -58,7 +58,7 @@ module.exports = { Let's create a [snapshot test](SnapshotTesting.md) for a Link component that renders hyperlinks: -```tsx title="Link.react.js" +```tsx title="Link.js" import React, {useState} from 'react'; const STATUS = { diff --git a/website/versioned_docs/version-27.2/SnapshotTesting.md b/website/versioned_docs/version-27.2/SnapshotTesting.md index 4222621f2219..fa1639e2eebd 100644 --- a/website/versioned_docs/version-27.2/SnapshotTesting.md +++ b/website/versioned_docs/version-27.2/SnapshotTesting.md @@ -9,7 +9,7 @@ A typical snapshot test case renders a UI component, takes a snapshot, then comp ## Snapshot Testing with Jest -A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/link.react.test.js) for a [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.react.js): +A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/link.react.test.js) for a [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.js): ```tsx import React from 'react'; @@ -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/main/packages/pretty-format) to make snapshots human-readable during code review. On subsequent test runs, Jest will 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 the `` component in this case) 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 the `` 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 the `` 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.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](/blog/2016/07/27/jest-14). 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. @@ -227,7 +227,7 @@ The goal is to make it easy to review snapshots in pull requests, and fight agai Your tests should be deterministic. Running the same tests multiple times on a component that has not changed should produce the same results every time. You're responsible for making sure your generated snapshots do not include platform specific or other non-deterministic data. -For example, if you have a [Clock](https://github.com/facebook/jest/blob/main/examples/snapshot/Clock.react.js) component that uses `Date.now()`, the snapshot generated from this component will be different every time the test case is run. In this case we can [mock the Date.now() method](MockFunctions.md) to return a consistent value every time the test is run: +For example, if you have a [Clock](https://github.com/facebook/jest/blob/main/examples/snapshot/Clock.js) component that uses `Date.now()`, the snapshot generated from this component will be different every time the test case is run. In this case we can [mock the Date.now() method](MockFunctions.md) to return a consistent value every time the test is run: ```js Date.now = jest.fn(() => 1482363367071); diff --git a/website/versioned_docs/version-27.2/TutorialReact.md b/website/versioned_docs/version-27.2/TutorialReact.md index 5fcfa52a098b..9b5ce3d25b88 100644 --- a/website/versioned_docs/version-27.2/TutorialReact.md +++ b/website/versioned_docs/version-27.2/TutorialReact.md @@ -58,7 +58,7 @@ module.exports = { Let's create a [snapshot test](SnapshotTesting.md) for a Link component that renders hyperlinks: -```tsx title="Link.react.js" +```tsx title="Link.js" import React, {useState} from 'react'; const STATUS = { diff --git a/website/versioned_docs/version-27.4/SnapshotTesting.md b/website/versioned_docs/version-27.4/SnapshotTesting.md index 4222621f2219..fa1639e2eebd 100644 --- a/website/versioned_docs/version-27.4/SnapshotTesting.md +++ b/website/versioned_docs/version-27.4/SnapshotTesting.md @@ -9,7 +9,7 @@ A typical snapshot test case renders a UI component, takes a snapshot, then comp ## Snapshot Testing with Jest -A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/link.react.test.js) for a [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.react.js): +A similar approach can be taken when it comes to testing your React components. Instead of rendering the graphical UI, which would require building the entire app, you can use a test renderer to quickly generate a serializable value for your React tree. Consider this [example test](https://github.com/facebook/jest/blob/main/examples/snapshot/__tests__/link.react.test.js) for a [Link component](https://github.com/facebook/jest/blob/main/examples/snapshot/Link.js): ```tsx import React from 'react'; @@ -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/main/packages/pretty-format) to make snapshots human-readable during code review. On subsequent test runs, Jest will 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 the `` component in this case) 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 the `` 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 the `` 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.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](/blog/2016/07/27/jest-14). 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. @@ -227,7 +227,7 @@ The goal is to make it easy to review snapshots in pull requests, and fight agai Your tests should be deterministic. Running the same tests multiple times on a component that has not changed should produce the same results every time. You're responsible for making sure your generated snapshots do not include platform specific or other non-deterministic data. -For example, if you have a [Clock](https://github.com/facebook/jest/blob/main/examples/snapshot/Clock.react.js) component that uses `Date.now()`, the snapshot generated from this component will be different every time the test case is run. In this case we can [mock the Date.now() method](MockFunctions.md) to return a consistent value every time the test is run: +For example, if you have a [Clock](https://github.com/facebook/jest/blob/main/examples/snapshot/Clock.js) component that uses `Date.now()`, the snapshot generated from this component will be different every time the test case is run. In this case we can [mock the Date.now() method](MockFunctions.md) to return a consistent value every time the test is run: ```js Date.now = jest.fn(() => 1482363367071); diff --git a/website/versioned_docs/version-27.4/TutorialReact.md b/website/versioned_docs/version-27.4/TutorialReact.md index 5fcfa52a098b..9b5ce3d25b88 100644 --- a/website/versioned_docs/version-27.4/TutorialReact.md +++ b/website/versioned_docs/version-27.4/TutorialReact.md @@ -58,7 +58,7 @@ module.exports = { Let's create a [snapshot test](SnapshotTesting.md) for a Link component that renders hyperlinks: -```tsx title="Link.react.js" +```tsx title="Link.js" import React, {useState} from 'react'; const STATUS = { From d1f1a2dfb53042b406f77af0d8a3e3eb8bc375ca Mon Sep 17 00:00:00 2001 From: Nicolas Charpentier Date: Thu, 6 Jan 2022 15:28:48 +0000 Subject: [PATCH 2/2] Refactor examples/snapshot --- examples/snapshot/{Clock.react.js => Clock.js} | 0 examples/snapshot/{Link.react.js => Link.js} | 0 .../{clock.react.test.js.snap => clock.test.js.snap} | 0 .../{link.react.test.js.snap => link.test.js.snap} | 0 .../snapshot/__tests__/{clock.react.test.js => clock.test.js} | 2 +- .../snapshot/__tests__/{link.react.test.js => link.test.js} | 2 +- 6 files changed, 2 insertions(+), 2 deletions(-) rename examples/snapshot/{Clock.react.js => Clock.js} (100%) rename examples/snapshot/{Link.react.js => Link.js} (100%) rename examples/snapshot/__tests__/__snapshots__/{clock.react.test.js.snap => clock.test.js.snap} (100%) rename examples/snapshot/__tests__/__snapshots__/{link.react.test.js.snap => link.test.js.snap} (100%) rename examples/snapshot/__tests__/{clock.react.test.js => clock.test.js} (90%) rename examples/snapshot/__tests__/{link.react.test.js => link.test.js} (97%) diff --git a/examples/snapshot/Clock.react.js b/examples/snapshot/Clock.js similarity index 100% rename from examples/snapshot/Clock.react.js rename to examples/snapshot/Clock.js diff --git a/examples/snapshot/Link.react.js b/examples/snapshot/Link.js similarity index 100% rename from examples/snapshot/Link.react.js rename to examples/snapshot/Link.js diff --git a/examples/snapshot/__tests__/__snapshots__/clock.react.test.js.snap b/examples/snapshot/__tests__/__snapshots__/clock.test.js.snap similarity index 100% rename from examples/snapshot/__tests__/__snapshots__/clock.react.test.js.snap rename to examples/snapshot/__tests__/__snapshots__/clock.test.js.snap diff --git a/examples/snapshot/__tests__/__snapshots__/link.react.test.js.snap b/examples/snapshot/__tests__/__snapshots__/link.test.js.snap similarity index 100% rename from examples/snapshot/__tests__/__snapshots__/link.react.test.js.snap rename to examples/snapshot/__tests__/__snapshots__/link.test.js.snap diff --git a/examples/snapshot/__tests__/clock.react.test.js b/examples/snapshot/__tests__/clock.test.js similarity index 90% rename from examples/snapshot/__tests__/clock.react.test.js rename to examples/snapshot/__tests__/clock.test.js index a001ce248355..59f91386f597 100644 --- a/examples/snapshot/__tests__/clock.react.test.js +++ b/examples/snapshot/__tests__/clock.test.js @@ -3,7 +3,7 @@ 'use strict'; import React from 'react'; -import Clock from '../Clock.react'; +import Clock from '../Clock'; import renderer from 'react-test-renderer'; jest.useFakeTimers(); diff --git a/examples/snapshot/__tests__/link.react.test.js b/examples/snapshot/__tests__/link.test.js similarity index 97% rename from examples/snapshot/__tests__/link.react.test.js rename to examples/snapshot/__tests__/link.test.js index 69a9160528e1..a86738d0b181 100644 --- a/examples/snapshot/__tests__/link.react.test.js +++ b/examples/snapshot/__tests__/link.test.js @@ -3,7 +3,7 @@ 'use strict'; import React from 'react'; -import Link from '../Link.react'; +import Link from '../Link'; import renderer from 'react-test-renderer'; it('renders correctly', () => {