サイプレスを接続する最も簡単な方法と🌟

3374 ワード
react cypress testing javascript テキストリンク
ホラ!ここで怠惰なdevと我々は、反応アプリケーションのサイブレス開発とテスト経験について話します.
Cypress.ioのテスト中にどのように素晴らしい反応devのツールを使用する方法について疑問に思う?始めましょう.

要件


V 16の反応チームと一緒に完全に新しいdevtoolsパッケージを提供しました.たぶん❤️ それを愛してください

インストール


1 ) cypressブラウザで実行しているアプリケーション用のdevツールを実行するには、スタンドアローン版react-devtools packageをインストールする必要があります.
yarn add --dev react-devtools

Tip: you can also install this package globally in order to run with different projects. It is ok because we will use this only for development.


構成


2 )次に、開発中の<script> (または次の. jsの<head> )のindex.htmlに、最初の_document.jsタグとして追加します.このスクリプトは実際にアプリケーションに反応devtoolsバックエンドを接続します.
<script src="http://localhost:8097"></script>
また、JavaScriptを使用してインポートできます
import 'react-devtools'
⚠️ 重要なことは、このインポートは、あなたのアプリ(特にDOMの前に)の他のインポートの前に来ることです.それが大きなdevtoolsクライアントを運ぶので、生産に展開する前にインポートを削除するようにしてください.
WebPackを使用して構成を制御する場合は、開発専用のエントリ配列の最初の項目としてreact-devtoolsを追加し、<script>タグまたはインポート文を処理する必要はありません.

走る


ここでは、アプリケーション、サイプレステスト、react-devtoolsを実行します.
# app
yarn start

# cypress 
yarn cypress open

# devtools app
yarn react-devtools
(はい、3コンソールタブが必要です).ランタイムアプリの接続を待つ電子アプリケーションを

そして今、サイプレスのアプリを開き、任意のspecを実行し、それが反応するdevtools接続を観察!👀🌟

結果


完全に働くDevToolsは2分であなたのテストを実行して反応!

制限


反応devtoolとサイプレスの最大の制限は、彼らがサイプレスの時間旅行スナップショットで動作しないということです.これは時間旅行の別のステップは、DOMスナップショットとしてレンダリングされ、実際の反応アプリケーションではないために発生します.
特定のテストステップをデバッグするには、デバッグするときにサイプレス実行を停止します.

代替案


chrome react-devtoolsを使用してdevtoolsを読み込むのに別の(より複雑な)方法があります.この方法はGleb Bahmutov https://www.cypress.io/blog/2020/01/07/how-to-load-the-react-devtools-extension-in-cypress/によるブログ記事で説明されます

終わり🎉


DevToolsは、サイプレステストと一緒に魅力のように動作します.楽しい🔥! ちょうど開いた電子窓で迷子にならないでください😉.

P.S. No devtools were harmed in the making of this article

[python]-ファイルの読み込み、書き込み
[プログラマー]模擬試験(JAVA)