From 3f15aea02b2c6ebe4a6b858f1b1a557d131c28bc Mon Sep 17 00:00:00 2001 From: Ava Li <62368440+Aveline-art@users.noreply.github.com> Date: Tue, 10 May 2022 07:42:29 -0700 Subject: [PATCH 1/6] updated docs with jsdom changes --- website/versioned_docs/version-28.0/TutorialjQuery.md | 10 ++++++++-- website/versioned_docs/version-28.1/TutorialjQuery.md | 10 ++++++++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/website/versioned_docs/version-28.0/TutorialjQuery.md b/website/versioned_docs/version-28.0/TutorialjQuery.md index 13a309ec4763..77f63db4dcd8 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](https://jestjs.io/docs/next/configuration#testenvironment-string), the `jest-environment-jsdom` package must be installed: + +```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..77f63db4dcd8 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](https://jestjs.io/docs/next/configuration#testenvironment-string), the `jest-environment-jsdom` package must be installed: + +```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). From e7fdd1361926e040a6c4a122de7fcd5d091f22c2 Mon Sep 17 00:00:00 2001 From: Ava Li <62368440+Aveline-art@users.noreply.github.com> Date: Tue, 10 May 2022 07:51:01 -0700 Subject: [PATCH 2/6] logged changes and added new info to main docs --- CHANGELOG.md | 1 + docs/TutorialjQuery.md | 10 ++++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 532ec8cacdc0..e6e7382aea9f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ ### Chore & Maintenance - `[docs]` Specified documentation about `--filter` CLI docs ([#12799](https://github.com/facebook/jest/pull/12799)) +- `[docs]` Updated docs to indicate that `jest-environment-jsdom` is a separate package [#12828](https://github.com/facebook/jest/issues/12828) - `[@jest-reporters]` Move helper functions from `utils.ts` into separate files ([#12782](https://github.com/facebook/jest/pull/12782)) - `[jest-resolve]` Replace `process.versions.pnp` type declaration with `@types/pnpapi` devDependency ([#12783](https://github.com/facebook/jest/pull/12783)) diff --git a/docs/TutorialjQuery.md b/docs/TutorialjQuery.md index 13a309ec4763..77f63db4dcd8 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](https://jestjs.io/docs/next/configuration#testenvironment-string), the `jest-environment-jsdom` package must be installed: + +```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). From dd1765ae45d3e8dbf918ae83e02f4a659dee1596 Mon Sep 17 00:00:00 2001 From: Ava Li <62368440+Aveline-art@users.noreply.github.com> Date: Tue, 10 May 2022 07:51:51 -0700 Subject: [PATCH 3/6] Update website/versioned_docs/version-28.0/TutorialjQuery.md Co-authored-by: Simen Bekkhus --- website/versioned_docs/version-28.0/TutorialjQuery.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/versioned_docs/version-28.0/TutorialjQuery.md b/website/versioned_docs/version-28.0/TutorialjQuery.md index 77f63db4dcd8..229ef34d10d1 100644 --- a/website/versioned_docs/version-28.0/TutorialjQuery.md +++ b/website/versioned_docs/version-28.0/TutorialjQuery.md @@ -63,7 +63,7 @@ We are mocking `fetchCurrentUser.js` so that our test doesn't make a real networ 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](https://jestjs.io/docs/next/configuration#testenvironment-string), the `jest-environment-jsdom` package must be installed: +To get started with the JSDOM [test environment](https://jestjs.io/docs/next/configuration#testenvironment-string), the `jest-environment-jsdom` package must be installed if it's not already: ```bash npm2yarn npm install --save-dev jest-environment-jsdom From e45b79d4595fe512e53aa886dd3abceff749a9c2 Mon Sep 17 00:00:00 2001 From: Ava Li <62368440+Aveline-art@users.noreply.github.com> Date: Tue, 10 May 2022 07:57:23 -0700 Subject: [PATCH 4/6] updated docs --- docs/TutorialjQuery.md | 2 +- website/versioned_docs/version-28.0/TutorialjQuery.md | 2 +- website/versioned_docs/version-28.1/TutorialjQuery.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/TutorialjQuery.md b/docs/TutorialjQuery.md index 77f63db4dcd8..99a7bb63979d 100644 --- a/docs/TutorialjQuery.md +++ b/docs/TutorialjQuery.md @@ -63,7 +63,7 @@ We are mocking `fetchCurrentUser.js` so that our test doesn't make a real networ 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](https://jestjs.io/docs/next/configuration#testenvironment-string), the `jest-environment-jsdom` package must be installed: +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 diff --git a/website/versioned_docs/version-28.0/TutorialjQuery.md b/website/versioned_docs/version-28.0/TutorialjQuery.md index 229ef34d10d1..99a7bb63979d 100644 --- a/website/versioned_docs/version-28.0/TutorialjQuery.md +++ b/website/versioned_docs/version-28.0/TutorialjQuery.md @@ -63,7 +63,7 @@ We are mocking `fetchCurrentUser.js` so that our test doesn't make a real networ 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](https://jestjs.io/docs/next/configuration#testenvironment-string), the `jest-environment-jsdom` package must be installed if it's not already: +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 diff --git a/website/versioned_docs/version-28.1/TutorialjQuery.md b/website/versioned_docs/version-28.1/TutorialjQuery.md index 77f63db4dcd8..99a7bb63979d 100644 --- a/website/versioned_docs/version-28.1/TutorialjQuery.md +++ b/website/versioned_docs/version-28.1/TutorialjQuery.md @@ -63,7 +63,7 @@ We are mocking `fetchCurrentUser.js` so that our test doesn't make a real networ 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](https://jestjs.io/docs/next/configuration#testenvironment-string), the `jest-environment-jsdom` package must be installed: +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 From 2a6c06075c0433160d305362d213b207dc7e5671 Mon Sep 17 00:00:00 2001 From: Ava Li <62368440+Aveline-art@users.noreply.github.com> Date: Tue, 10 May 2022 08:02:39 -0700 Subject: [PATCH 5/6] moved changelog line to correct place --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e6e7382aea9f..7f9cfce3ded8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,8 +8,10 @@ ### 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 ## 28.1.0 @@ -28,7 +30,6 @@ ### Chore & Maintenance - `[docs]` Specified documentation about `--filter` CLI docs ([#12799](https://github.com/facebook/jest/pull/12799)) -- `[docs]` Updated docs to indicate that `jest-environment-jsdom` is a separate package [#12828](https://github.com/facebook/jest/issues/12828) - `[@jest-reporters]` Move helper functions from `utils.ts` into separate files ([#12782](https://github.com/facebook/jest/pull/12782)) - `[jest-resolve]` Replace `process.versions.pnp` type declaration with `@types/pnpapi` devDependency ([#12783](https://github.com/facebook/jest/pull/12783)) From 2d38d6d9b40b8ef662dc276a473d5786fcdb1f45 Mon Sep 17 00:00:00 2001 From: Simen Bekkhus Date: Tue, 10 May 2022 18:49:27 +0200 Subject: [PATCH 6/6] Update CHANGELOG.md --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7f9cfce3ded8..0703930b8a15 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,6 @@ - `[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 ## 28.1.0