Skip to content

docs(angular): note jest transformIgnorePatterns for es modules #3298

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Dec 11, 2023
Merged

docs(angular): note jest transformIgnorePatterns for es modules #3298

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
91e6cf2
docs(angular): note jest transformIgnorePatterns for es modules
liamdebeasi Dec 7, 2023
4d90979
add pnpm example
liamdebeasi Dec 8, 2023
d0a1973
lint
liamdebeasi Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions docs/angular/build-options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Build Options

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.
Expand Down Expand Up @@ -175,6 +178,29 @@ export class HomePage {}
<ion-button routerLink="/foo" routerDirection="root">Go to Foo Page</ion-button>
```

**Testing**

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:

<Tabs groupId="package-manager" defaultValue="npm" values={[{ value: 'npm', label: 'npm' }, { value: 'pnpm', label: 'pnpm' }]}>
<TabItem value="npm">

```json

"transformIgnorePatterns": ["<rootDir>/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]
```

</TabItem>
<TabItem value="pnpm">

```json

"transformIgnorePatterns": ["<rootDir>/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"]
```

</TabItem>
</Tabs>

### Usage with NgModule-based Applications

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

**Testing**

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:

<Tabs groupId="package-manager" defaultValue="npm" values={[{ value: 'npm', label: 'npm' }, { value: 'pnpm', label: 'pnpm' }]}>
<TabItem value="npm">

```json

"transformIgnorePatterns": ["<rootDir>/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"]
```

</TabItem>
<TabItem value="pnpm">

```json

"transformIgnorePatterns": ["<rootDir>/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"]
```

</TabItem>
</Tabs>

## Modules

### Overview
Expand Down