NXワークスペースで共有サイプレスコマンドを共有する

Cypress E 2 E試験に革命をもたらしたそれは成功した多くの痛みのポイントの開発者は特にE 2 Eのテストソリューションを持って対処した.この記事では、我々はどのように次のレベルには、サイプレスを使用する方法を学ぶことによってそれをもたらす方法を参照してくださいNx ワークスペース、特に共有する方法Cypress custom commands NX Monorepoで.

NX❤️サイサイプレス

NXを使用する大きな利点の一つは、いくつかのベストプラクティスツールを使用して開発環境を設定し、構成を扱うすべての負担を取り除き、docsを介して読み込み、自分で設定することです.
NXで新しいアプリケーションを生成するときはいつでも

TypeScriptを設定し、設定;

単位試験の準備

着飾るためのセット

あなたはタブ対スペース上で請求する必要はありませんので、きれいな設定

そして、最後に、サイプレスはE 2 Eテスト(そして、すぐに来ているコンポーネントテスト)のために準備しました

すべてのアプリケーション(積極的にオププトアウトしない限り)は、生成された対応するサイプレスセットアップを<app-name>-e2e (あなたが望むならば、あなたはその名前を変えることができます).
これはNXはかなりあなたのように魅力的になりますdefault development CLI , あなたが完全にマルチアプリケーションNX monorepoワークスペースを活用することを期待しない場合でも.

ビデオバージョンを好む？

ここに行く!ご自由に.

新しいNXワークスペースの設定

既にワークスペースを設定している場合は、この節を飛ばしてください.あなたのための新しい何もここの専門家😉. その代わりに、NXがすべてについて何であるかについて、本当に確信していないならば、沿って続いてください.
新しい反応ベースのNXワークスペースを生成しましょう.

npx create-nx-workspace nxlovescypress --preset=react --appName=happynrwl

これは、反応アプリで新しいセットアップを生成しますhappynrwl . スタイルとNx Cloud セットアップ、あなたが好きなように自由に選択してください.この記事には関係ありません.

Note, you can also use an Angular-based Nx workspace setup. It doesn’t really make any difference for this article. You can refer to the GitHub example repo linked at the end of this article, which uses an Nx workspace containing an Angular and React application.

次のような状況で新しいNXワークスペースを終了する必要があります.

我々のセットアップを調査しましょう.

NXワークスペースでのサイプレスの実行

happynrwl-e2e 我々のために生成されたサイプレスアプリケーションですhappynrwl 反応アプリ.
あなたは、Cypress

npx nx e2e happynrwl-e2e

また、渡すことができます--watch サイプレステストランナーと対話的に実行し、ソースを変更するたびにテストが再実行されるようにします.
この素晴らしい部分は、何も設定する必要はありません.必要ありません

私たちのサイプレステスト環境でそれを読み込むことができるように、我々の開発サーバーを手動で最初に我々の反応アプリを提供してスピン

E 2 Eプロジェクトのためのリンギングを設定する(良い品質のテストコードを書くことは、ちょうど重要です)

サイプレスカスタムコマンド

サイプレスでは、一般的にグローバルを介して相互作用cy 例えば、あなたは書くでしょう

cy.get('[data-testid="some-link"]').click();

いくつかのDOM要素をつかむために、それと対話してください.この場合、リンクをクリックします.
幸いにも、サイプレスは拡張可能ですcy テスト実装で簡単に呼び出すことができます.
あなたのサイプレスのセットアップでsupport/commands.ts このようなカスタムコマンドの例の宣言を参照するファイル

// eslint-disable-next-line @typescript-eslint/no-namespace
declare namespace Cypress {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface Chainable<Subject> {
    login(email: string, password: string): void;
  }
}
//
// -- This is a parent command --
Cypress.Commands.add('login', (email, password) => {
  console.log('Custom command example: Login', email, password);
});
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

詳細については、公式のサイプレスドキュメントで読む:https://docs.cypress.io/api/cypress-api/custom-commands .

サイプレスカスタムコマンドの共有

単純なカスタムサイプレスコマンドをgetEl 続くCypress best practice 専用の要素を取るdata-testid プロパティ.
純粋な実装がどのように見えるかは、ここにあります.

Cypress.Commands.add('getEl', (identifier: string) => {
  return cy.get(`[data-testid=${identifier}]`);
});

理想的には、すべてのe 2 eテストでこのタイプのコマンドを再利用したい.NXがどのようにこの努力で我々をかなり助けることができるかについて調査しましょう.

NXワークスペースにおける共有機能

新しいNXワークスペースを生成すると、apps and libs フォルダ.この区別は、我々のソースコードと論理の組織をより小さく、より焦点を当てた、そして非常に粘着性のユニットに作り出して、懸念方法論の分離に続いて、よりモジュラーなアーキテクチャを持つことを許します.
これは、再利用と共有機能がNXワークスペースの中で起こるところでもあります.NXは自動的にtsconfig.base.json 彼らは簡単に他のアプリやLIBSによって消費されることができます.そのように、図書館で組織される機能性は

import { Button } from '@my-organization/ui';

ライブラリを再構築する必要はありません、それを公開するか、(しかし、あなたはまだできる).
この記事では、このタイプのセットアップを活用して、NXライブラリ内の私たちのカスタムサイプレスコマンドを整理するために、他のアプリやLIBS全体ではなく、再利用することができますが、すべての我々のサイプレスE 2 Eのテストの間で潜在的にNXのmonorepoのワークスペースに住んでいます.
公式NXドキュメントのアプリとLIBSの精神モデルについてもっと読むhttps://nx.dev/structure/applications-and-libraries

カスタムコマンドをホストする新しいライブラリの生成

前述のように、NXワークスペース内で機能を共有するライブラリが必要です.では一つを生成しましょう.

npx nx generate @nrwl/js:library --name=cypress-commands --directory=shared --buildable=false

The @nrwl/js package is used to create pure TypeScript packages that are framework agnostic. Learn more: https://nx.dev/getting-started/nx-and-typescript

我々が得たものを調査しましょう.新しく生成されたライブラリindex.ts あなたのライブラリの“パブリックAPI”(しばしば“バレルファイル”と呼ばれる)ファイルです.このエントリポイントは、他のライブラリやアプリケーションに対して何が公開されるべきか、ライブラリ自体でプライベートなままでいるべきかを完全に制御することができます.

我々のGetelサイプレスカスタムコマンドをつくること

我々のライブラリでは、別のファイルでカスタムコマンドを指定します.このように、作成しましょうget-el-command.ts 図書館では

// libs/shared/cypress-commands/src/lib/get-el-command.ts

// eslint-disable-next-line @typescript-eslint/no-namespace
declare namespace Cypress {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface Chainable<Subject> {
    getEl: (identifier: string) => Chainable<JQuery<HTMLElement>>;
  }
}

Cypress.Commands.add('getEl', (identifier: string) => {
  return cy.get(`[data-testid=${identifier}]`);
});

それを公開するために、我々はまた、それをエクスポートする必要がありますindex.ts 我々のlibのファイル:

// libs/shared/cypress-commands/src/index.ts
import './lib/get-el-command';

🤔ちょっと待って、私たちは、1980年代の輸出よりむしろ輸入をしましたindex.ts . 正しい.サイプレスコマンドがグローバルに機能を登録することによってつくられるので、これは少しの特別なケースですCypress.Commands オブジェクト.このように、私たちがする必要があるのはファイルをインポートすることですget-el-command.ts が実行されるCypress.Commands.add('getEl',... 関数が呼び出され、登録されます.

ライブラリへのサイプレス型サポートの追加

TypeScriptはサイブレスのグローバルを認識しないことに気づくかもしれませんcy 生成するオブジェクトcypress-commands 図書館.

各NX libはすでに設定されており、typescriptとうまく動作するように設定されています.がある

tsconfig.json エントリレベルの設定ファイルであり、ルートレベルからtsconfig.base.json

tsconfig.lib.json ライブラリ固有の型設定を保持する

tsconfig.spec.json これは主にジェストテストのためです

サイプレスの種類を動作させるには、追加する必要がありますcypress and node にtypes プロパティcompilerOptions インtsconfig.lib.json :

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    ...
    "types": ["cypress", "node"]
  },
  ...
}

サイプレスコマンドの消費

我々は我々のカスタムコマンドを使用する準備ができているe 2 eテストでは、具体的にはhappynrwl-e2e . そのためには、cypressに登録されていることを確認するためにカスタムコマンドをインポートする必要があります.移動するapps/happynrwl-e2e/src/support/index.ts そして、共有サイプレスコマンドを含むlibをインポートします.

// apps/happynrwl-e2e/src/support/index.ts
...
import '@nxlovescypress/shared/cypress-commands';

便利な使い方@nxlovescypress/... . NXが自動的に生成されたライブラリごとにパスマッピングを作成するので、これは動作しますtsconfig.base.json :

{
  "compileOnSave": false,
  "compilerOptions": {
    ...
    "paths": {
      "@nxlovescypress/shared/cypress-commands": [
        "libs/shared/cypress-commands/src/index.ts"
      ]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

コマンドをテストするには、メインコンポーネントを開きましょうnx-welcome.tsx にhappynrwl アプリケーションとタイトルの領域を変更するテキストと言うNx ❤️ Cypress :

// apps/happynrwl/src/app/nx-welcome.tsx
<div id="welcome">
  <h1 data-testid="message">
    <span> Hello there, </span>
    Nx ❤️ Cypress
  </h1>
</div>

次に、対応するE 2 Eテストでapps/happynrwl-e2e/src/integration/app.spec.ts 次のように変更します.

// apps/happynrwl-e2e/src/integration/app.spec.ts
describe('happynrwl', () => {
  beforeEach(() => cy.visit('/'));

  it('should display welcome message', () => {
    cy.getEl('message').should('contain', 'Nx ❤️ Cypress');
  });
});

TypeScriptオートコンプリートのサポートが適切に取り上げられていることに注意してください.

最後に、ウォッチモードでテストを実行すると、このコマンドを実行する必要があります.

npx nx e2e happynrwl-e2e --watch

NPXワークスペースを通したサイプレスコマンドの再利用

再利用は簡単です.当社のカスタムサイプレスコマンドは、現在のNXのワークスペース内のライブラリにカプセル化されているので、我々は簡単に他のサイプレスベースのE 2 Eテスト全体で再利用することができます.それをする必要があるのはsupport/index.ts サイプレスの設定

import '@nxlovescypress/shared/cypress-commands';

私はそれをあなたに任せる

その対応するE 2 Eテストで新しいアプリケーションを生成する

共有コマンドのインポート

サイプレスE 2 Eテストでそれらを使用してください

結論

この記事では、NXがどのように設定してサイプレスを設定し、どのようにNXワークスペース内のライブラリを活用するかについてよく理解しておく必要があります.
ここからどこへ行くか

join the community Slack

Nxについてもっと学ぶhttps://nx.dev

購読する

200以上の開発者とtake the free Egghead course どのようにNXとの反応開発をスケールする.

また、この記事に使用したGithubリポジトリもあります.https://github.com/nrwl/nx-cypress-command-sharing