Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(docs): updated docs with jsdom changes #12831

Merged
merged 6 commits into from May 10, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Expand Up @@ -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
Expand Down
10 changes: 8 additions & 2 deletions docs/TutorialjQuery.md
Expand Up @@ -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).
10 changes: 8 additions & 2 deletions website/versioned_docs/version-28.0/TutorialjQuery.md
Expand Up @@ -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).
10 changes: 8 additions & 2 deletions website/versioned_docs/version-28.1/TutorialjQuery.md
Expand Up @@ -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).