diff --git a/CHANGELOG.md b/CHANGELOG.md index 532ec8cacdc0..0703930b8a15 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ ### Chore & Maintenance +- `[docs]` Updated docs to indicate that `jest-environment-jsdom` is a separate package [#12828](https://github.com/facebook/jest/issues/12828) - `[jest-haste-map]` Bump `walker` version ([#12324](https://github.com/facebook/jest/pull/12324)) ### Performance diff --git a/docs/TutorialjQuery.md b/docs/TutorialjQuery.md index 13a309ec4763..99a7bb63979d 100644 --- a/docs/TutorialjQuery.md +++ b/docs/TutorialjQuery.md @@ -59,8 +59,14 @@ test('displays a user after a click', () => { }); ``` -The function being tested adds an event listener on the `#button` DOM element, so we need to set up our DOM correctly for the test. Jest ships with `jsdom` which simulates a DOM environment as if you were in the browser. This means that every DOM API that we call can be observed in the same way it would be observed in a browser! - We are mocking `fetchCurrentUser.js` so that our test doesn't make a real network request but instead resolves to mock data locally. This ensures that our test can complete in milliseconds rather than seconds and guarantees a fast unit test iteration speed. +Also, the function being tested adds an event listener on the `#button` DOM element, so we need to set up our DOM correctly for the test. `jsdom` and the `jest-environment-jsdom` package simulate a DOM environment as if you were in the browser. This means that every DOM API that we call can be observed in the same way it would be observed in a browser! + +To get started with the JSDOM [test environment](Configuration.md#testenvironment-string), the `jest-environment-jsdom` package must be installed if it's not already: + +```bash npm2yarn +npm install --save-dev jest-environment-jsdom +``` + The code for this example is available at [examples/jquery](https://github.com/facebook/jest/tree/main/examples/jquery). diff --git a/website/versioned_docs/version-28.0/TutorialjQuery.md b/website/versioned_docs/version-28.0/TutorialjQuery.md index 13a309ec4763..99a7bb63979d 100644 --- a/website/versioned_docs/version-28.0/TutorialjQuery.md +++ b/website/versioned_docs/version-28.0/TutorialjQuery.md @@ -59,8 +59,14 @@ test('displays a user after a click', () => { }); ``` -The function being tested adds an event listener on the `#button` DOM element, so we need to set up our DOM correctly for the test. Jest ships with `jsdom` which simulates a DOM environment as if you were in the browser. This means that every DOM API that we call can be observed in the same way it would be observed in a browser! - We are mocking `fetchCurrentUser.js` so that our test doesn't make a real network request but instead resolves to mock data locally. This ensures that our test can complete in milliseconds rather than seconds and guarantees a fast unit test iteration speed. +Also, the function being tested adds an event listener on the `#button` DOM element, so we need to set up our DOM correctly for the test. `jsdom` and the `jest-environment-jsdom` package simulate a DOM environment as if you were in the browser. This means that every DOM API that we call can be observed in the same way it would be observed in a browser! + +To get started with the JSDOM [test environment](Configuration.md#testenvironment-string), the `jest-environment-jsdom` package must be installed if it's not already: + +```bash npm2yarn +npm install --save-dev jest-environment-jsdom +``` + The code for this example is available at [examples/jquery](https://github.com/facebook/jest/tree/main/examples/jquery). diff --git a/website/versioned_docs/version-28.1/TutorialjQuery.md b/website/versioned_docs/version-28.1/TutorialjQuery.md index 13a309ec4763..99a7bb63979d 100644 --- a/website/versioned_docs/version-28.1/TutorialjQuery.md +++ b/website/versioned_docs/version-28.1/TutorialjQuery.md @@ -59,8 +59,14 @@ test('displays a user after a click', () => { }); ``` -The function being tested adds an event listener on the `#button` DOM element, so we need to set up our DOM correctly for the test. Jest ships with `jsdom` which simulates a DOM environment as if you were in the browser. This means that every DOM API that we call can be observed in the same way it would be observed in a browser! - We are mocking `fetchCurrentUser.js` so that our test doesn't make a real network request but instead resolves to mock data locally. This ensures that our test can complete in milliseconds rather than seconds and guarantees a fast unit test iteration speed. +Also, the function being tested adds an event listener on the `#button` DOM element, so we need to set up our DOM correctly for the test. `jsdom` and the `jest-environment-jsdom` package simulate a DOM environment as if you were in the browser. This means that every DOM API that we call can be observed in the same way it would be observed in a browser! + +To get started with the JSDOM [test environment](Configuration.md#testenvironment-string), the `jest-environment-jsdom` package must be installed if it's not already: + +```bash npm2yarn +npm install --save-dev jest-environment-jsdom +``` + The code for this example is available at [examples/jquery](https://github.com/facebook/jest/tree/main/examples/jquery).