You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: adev/src/content/guide/testing/overview.md
+19-21Lines changed: 19 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@ NOTE: This guide covers the default testing setup for new Angular CLI projects,
8
8
9
9
The Angular CLI downloads and installs everything you need to test an Angular application with the [Vitest testing framework](https://vitest.dev). New projects include `vitest` and `jsdom` by default.
10
10
11
-
Vitest runs your unit tests in a Node.js environment. To simulate the browser's DOM, Vitest uses a library called `jsdom`. This allows for faster test execution by avoiding the overhead of launching a browser. You can swap `jsdom` for an alternative like `happy-dom` by installing it and uninstalling `jsdom`.
11
+
Vitest runs your unit tests in a Node.js environment. To simulate the browser's DOM, Vitest uses a library called `jsdom`. This allows for faster test execution by avoiding the overhead of launching a browser. You can swap `jsdom` for an alternative like `happy-dom` by installing it and uninstalling `jsdom`. Currently, `jsdom` and `happy-dom` are the supported DOM emulation libraries.
12
12
13
13
The project you create with the CLI is immediately ready to test. Run the [`ng test`](cli/test) command:
14
14
@@ -52,7 +52,7 @@ The `setupFiles` and `providersFile` options are particularly useful for managin
52
52
53
53
For example, you could create a `src/test-providers.ts` file to provide `provideHttpClientTesting` to all your tests:
@@ -132,9 +132,23 @@ For more detailed information, see the [Code coverage guide](guide/testing/code-
132
132
133
133
While the default Node.js environment is faster for most unit tests, you can also run your tests in a real browser. This is useful for tests that rely on browser-specific APIs (like rendering) or for debugging.
134
134
135
-
To run tests in a browser, you must first install a browser provider. Beyond installing the provider and specifying the `browsers` option in `angular.json` or as a CLI flag, no further configuration is required.
135
+
To run tests in a browser, you must first install a browser provider. Read more about Vitest's browser mode in the [official documentation](https://vitest.dev/guide/browser).
136
136
137
-
Read more about Vitest's browser mode in the [official documentation](https://vitest.dev/guide/browser).
137
+
Once the provider is installed, you can run your tests in the browser by configuring the `browsers` option in `angular.json` or by using the `--browsers` CLI flag. Tests run in a headed browser by default. If the `CI` environment variable is set, headless mode is used instead. To explicitly control headless mode, you can suffix the browser name with `Headless` (e.g., `chromiumHeadless`).
138
+
139
+
```bash
140
+
# Example for Playwright (headed)
141
+
ng test --browsers=chromium
142
+
143
+
# Example for Playwright (headless)
144
+
ng test --browsers=chromiumHeadless
145
+
146
+
# Example for WebdriverIO (headed)
147
+
ng test --browsers=chrome
148
+
149
+
# Example for WebdriverIO (headless)
150
+
ng test --browsers=chromeHeadless
151
+
```
138
152
139
153
Choose one of the following browser providers based on your needs:
140
154
@@ -195,23 +209,7 @@ The `@vitest/browser-preview` provider is designed for Webcontainer environments
195
209
</docs-code>
196
210
</docs-code-multifile>
197
211
198
-
Once the provider is installed, you can run your tests in the browser using the `--browsers` flag. Tests run in a headed browser by default. If the `CI` environment variable is set, headless mode is used instead. To explicitly control headless mode, you can suffix the browser name with `Headless` (e.g., `chromiumHeadless`).
199
-
200
-
```bash
201
-
# Example for Playwright (headed)
202
-
ng test --browsers=chromium
203
-
204
-
# Example for Playwright (headless)
205
-
ng test --browsers=chromiumHeadless
206
-
207
-
# Example for WebdriverIO (headed)
208
-
ng test --browsers=chrome
209
-
210
-
# Example for WebdriverIO (headless)
211
-
ng test --browsers=chromeHeadless
212
-
```
213
-
214
-
For more advanced browser-specific configuration, see the [Advanced Vitest configuration](#advanced-vitest-configuration) section.
212
+
HELPFUL: For more advanced browser-specific configuration, see the [Advanced Vitest configuration](#advanced-vitest-configuration) section.
0 commit comments