Skip to content

Commit f050871

Browse files
authored
docs(angular): note jest transformIgnorePatterns for es modules (#3298)
1 parent 8a15b44 commit f050871

File tree

1 file changed

+49
-0
lines changed

1 file changed

+49
-0
lines changed

docs/angular/build-options.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import Tabs from '@theme/Tabs';
2+
import TabItem from '@theme/TabItem';
3+
14
# Build Options
25

36
Developers have two options for using Ionic components: Standalone or Modules. This guide covers both options as well as the benefits and downsides of each approach.
@@ -175,6 +178,29 @@ export class HomePage {}
175178
<ion-button routerLink="/foo" routerDirection="root">Go to Foo Page</ion-button>
176179
```
177180

181+
**Testing**
182+
183+
Ionic Angular's standalone components use ES Modules. As a result, developers using Jest should ensure that ES Modules are transpiled to a format that Jest can use. Developers using Jest should add the following to their Jest config:
184+
185+
<Tabs groupId="package-manager" defaultValue="npm" values={[{ value: 'npm', label: 'npm' }, { value: 'pnpm', label: 'pnpm' }]}>
186+
<TabItem value="npm">
187+
188+
```json
189+
190+
"transformIgnorePatterns": ["<rootDir>/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]
191+
```
192+
193+
</TabItem>
194+
<TabItem value="pnpm">
195+
196+
```json
197+
198+
"transformIgnorePatterns": ["<rootDir>/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"]
199+
```
200+
201+
</TabItem>
202+
</Tabs>
203+
178204
### Usage with NgModule-based Applications
179205

180206
:::caution
@@ -315,6 +341,29 @@ export class HomePageModule {}
315341
<ion-button routerLink="/foo" routerDirection="root">Go to Foo Page</ion-button>
316342
```
317343

344+
**Testing**
345+
346+
Ionic Angular's standalone components use ES Modules. As a result, developers using Jest should ensure that ES Modules are transpiled to a format that Jest can use. Developers using Jest should add the following to their Jest config:
347+
348+
<Tabs groupId="package-manager" defaultValue="npm" values={[{ value: 'npm', label: 'npm' }, { value: 'pnpm', label: 'pnpm' }]}>
349+
<TabItem value="npm">
350+
351+
```json
352+
353+
"transformIgnorePatterns": ["<rootDir>/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]
354+
```
355+
356+
</TabItem>
357+
<TabItem value="pnpm">
358+
359+
```json
360+
361+
"transformIgnorePatterns": ["<rootDir>/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"]
362+
```
363+
364+
</TabItem>
365+
</Tabs>
366+
318367
## Modules
319368

320369
### Overview

0 commit comments

Comments
 (0)