StoryBookはどのように反応するか

導入

すべての開発者が動作するソフトウェアを構築したい.我々のソフトウェアのコードは完璧にそれを分離し、一連のテストでその動作を示すことを確認することができます.彼らは我々のアプリのコンテキスト内でテストされていると同じように我々のコンポーネントのために言うことができない.
ストーリーブックを表示することができますし、孤立した方法であなたのコンポーネントと対話します.これは、ユニットのテストだけではなく、UIコンポーネントのです.の言葉でStorybook’s documentation :
StoryBookは、UIコンポーネントのユーザーインターフェイスの開発環境と遊び場です.ツールは、独立したコンポーネントを作成し、独立した開発環境で対話的にShowcaseコンポーネントを作成することができます.
このポストでは、どのようにStoryBook私たちUIコンポーネントを作成し、コンポーネントのテストを改善することができますが見つかります.

絵本から始める

新しい反応プロジェクトのブートストラッピングから始めましょう.

npx create-react-app my-storybook-app
cd my-storybook-app
#install storybook
npx -p @storybook/cli sb init
yarn storybook

走るときyarn storybook , あなたはローカルアドレスでストーリーブックのテストページを見るべきですhttp://localhost:9009/ :

テストのために、基本的なコンポーネントを作成しますCoffeeButton . これは、コーヒーカップの数が表示されます.

// /src/stories/CoffeeButton.js
import React, { useState } from 'react';
const ButtonStyle = {
    backgroundColor: 'lightgrey',
    padding: '10px',
    borderRadius: '5px',
    fontSize: '15px',
    border: '#66c2ff 3px solid',
    cursor: 'pointer'
};
const CoffeeButton = ({children}) => {
    const [count, setCount] = useState(1);
    return (
        <button style = {ButtonStyle} onClick = {() => setCount(count + 1)} >
        {new Array(count).fill(children)}
        {(count < 2)
        ? <div> Please serve 1 cup of coffee </div>
        : <div> Please serve {count} cups of coffee </div>
        }
        </button>
    );
};
export default CoffeeButton;

物語は“ストーリー”を使用して動作します.ストーリーは、1つのコンポーネントの単一の状態を格納し、そのコンポーネントをテスト用の画面にレンダリングする機能です.話を書きましょうCoffeeButton コンポーネント.インsrc/stories ファイルを作成し、名前を付けますCoffeeButtonStory.js :

import React from 'react';
import { storiesOf } from '@storybook/react';
import CoffeeButton from './CoffeeButton';
storiesOf('CoffeeButton', module)
  .add('Black', () => (
    <CoffeeButton>
      <span role="img" aria-label="without-milk">
         🏿
      </span>
    </CoffeeButton>
  ))
  .add('White', () => (
    <CoffeeButton>
      <span role="img" aria-label="with-milk">
        🏼
      </span>
    </CoffeeButton>
));

ここでは、コンポーネントがストーリーブックにどのように見えますか

UIテスト

StoryBook UIコンポーネントをテストするためのさまざまな技術を提供しています.コンポーネントは以下のような様々な理由でテストを受ける必要があります.

バグの検出

テストは、プロジェクトで動作する他の開発者向けのガイドラインとして機能するように文書化することができます

新しいコミットの間に物が壊れないようにする

のストーリーをシームレスにコンポーネントのテストを行うことができます方法のいくつかを調べてみましょう.

構造試験

構造テストは、その内部実装の知識に基づいてコンポーネントのテストを含みます.ストーリーブックは構造試験を実施するstoryshots – コードのスナップショットを比較することによって動作するアドオン.取り付けるstoryshots 実行:

npm i -D @storybook/addon-storyshots react-test-renderer

react-test-renderer レンダリングは、DOMに依存せずに、純粋なJavaScriptオブジェクトにコンポーネントを反応させます.これにより、DOMツリーのスクリーンショットを取得できます.
インストール後、テストファイルを作成しましょうstoryshots.test.js , それを初期化するstoryshots :

// src/storyshots.test.js
import initStoryshots from '@storybook/addon-storyshots';  
initStoryshots({ /* configuration options */ });

実行するコンポーネントをテストするにはnpm test . これは、コンポーネントの出力を検査できるスナップショットを生成します.テストを実行するたびに、スナップショットが自動的に生成され、以前のテストから生成されるスナップショットと比較されます.If storyshots スポットの任意の違いは、テストが失敗します.以下は最初のテストで生成されたスナップショットです.

我々のテストは成功しました、今、我々の何かを変えるようにしましょうCoffeeButton コンポーネント.変更行16CoffeeButton.js です.? <div> Please DO NOT serve 1 cup of coffee </div>実行中のテストでは、次のエラーが発生します.

詳細な説明:

自動視覚テスト

自動化された視覚テストは自動的に私たちのUIが視覚的に意図して表示されることを確認することが含まれます.これは、クロスブラウザのテストでは、開発者の観測をエスケープlapseを検出することができます便利です.ストーリーブックUIを視覚的にアドオンを介してテストstoryshot-puppeteer . と同じstoryshots , このアドオンは、スクリーンショットを比較することによって動作します.取り付けるstoryshot-puppeteer 実行:

npm i -D @storybook/addon-storyshots-puppeteer

一度インストールすると、UIを比較するためにコードではなく、我々はテスト比較をオーバーライドする必要がありますimageSnapshot からpuppeteer アドオン.我々は、編集することによってこれを行うことができますinitStoryshots 関数は、我々の構造テストを運ぶときに作成.また、私たちのストーリーブックが実行されるURLを指定する必要があります.

// src/storyshots.test.js
import initStoryshots from '@storybook/addon-storyshots';
import {imageSnapshot} from '@storybook/addon-storyshots-puppeteer';
initStoryshots({
    test: imageSnapshot({storybookUrl: 'http://localhost:9009/'}),
});

以下は、画像を初めてテストするときに生成されるスナップショットです.

コンポーネント内のUIプロパティを変更するには、テストは失敗します.puppeteer スナップショットの形式の違いを返します.UIの一部を変えましょう.3行目でCoffeeButton.js , 背景色を変更するlightgrey to lightblue :

backgroundColor: 'lightblue',

テストを実行すると、

以下の違いが発生したスナップショットpuppeteer UIでは

上のディフュージョンでは、元の画像が左側にあり、変更された画像が右側にあり、両者の違いが中央にあります.

インタラクションテスト

相互作用のテストでは、ストーリーブックは、DOMのあなたの話と一緒にテストとその結果を表示することができます.これはアドオンを介してこれを行う-react-storybook-specifications . このアドオンをインストールするには、次のコマンドを実行します.

npm install -D storybook-addon-specifications

次に、この行をあなたのaddons.js ファイル

import 'storybook-addon-specifications/register';

react-storybook-specifications 単独では動作しませんので、まだ以下をインストールする必要があります.enzyme : JavaScriptのテストユーティリティ.enzyme-adapter-react-16 : あなたが使用している反応のバージョンに対応する酵素のアダプター.expect : テストを書くとき、値が特定の条件に会うのをチェックするのに用いられるJestの作り付けの方法.
これらのアドオンをインストールするには、次のコマンドを実行します.

npm install -D enzyme expect enzyme-adapter-react-16

我々の中でconfig.js ファイルをインポートしますconfigure and Adapter からenzyme and enzyme-adapter-react-16 . 私たちは2つのインスタンスを持つことに注意してくださいconfigure したがって、以下のように指定する必要があります.

import { configure as configure1 } from '@storybook/react';
import {configure as configure2} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
function loadStories() {
  require('../src/stories');
}
configure1(loadStories, module);
configure2({ adapter: new Adapter() });

の一部をテストすることによってどのように動作するかを見てみましょうCoffeeButton コンポーネント.インCoffeeButtonStory.js , 次のコードブロックを入力します.

import React from 'react';
    import { storiesOf } from '@storybook/react';
    import { action } from '@storybook/addon-actions';
    import { specs, describe, it } from 'storybook-addon-specifications';
    import {mount} from "enzyme";
    import expect from "expect";
    import CoffeeButton from './CoffeeButton';
    const stories = storiesOf('CoffeeButton', module)
    stories
    .add('Black', () => {
        const story =
        <CoffeeButton onMouseOver={action('click')}>
        <span role="img" aria-label="without-milk">
        🏿
        </span>
      </CoffeeButton>;
      specs(() => describe('Black', () => {
         it('Should have the following text: 🏿Please serve 1 cup of coffee', () => {
             let output = mount(story);
             expect(output.text()).toContain('🏿Please serve 1 cup of coffee');
         }); 
      }));
      return story;
    })

今すぐ保存し、アプリケーションを実行します.ブラウザでは、次のようになります.

我々のテスト期待を変えましょう.変更行20CoffeeButtonStory.js です.

expect(output.text()).toContain('🏿Please serve a cup of coffee');

今我々はアプリを実行し、我々のブラウザをチェックアウトするとき、これは私たちが得るものです

見られるように、予想される出力を変更するとDOMにエラーが発生します.インタラクションテストstorybook-addon-specifications Aを持つliving ドキュメントでは、コンポーネントとテスト結果を相互に対話できます.

結論

StoryBook私たちのUIコンポーネントをテストするための素晴らしい方法を提供します.それは我々がユニットテストを廃止しているように見えるかもしれませんが、それはそうではありません.単体テストは、コードで何がうまくいかないかを知ることを目的としています.この場合、我々は反応コンポーネントをテストしています、そして、何かが我々のUIとうまくいかないならば、我々はまだ我々が修正しなければならないマークアップについての質問をします.
これは、統合とスナップショットテストが単体テストと同じくらい良いことを意味します.コードを再生する場合は、常にソースコードをチェックアウトすることができますhere Githubについて

プラグイン：ログオン、WebアプリのDVR

畝

畝
LogRocket あなたが自分のブラウザで起こったかのように問題を再生することができるフロントエンドのログツールです.代わりに、エラーが発生したり、スクリーンショットやログのダンプのユーザーを求めるのを推測するのではなく、LogRocketすぐに何が間違って理解するためにセッションをリプレイすることができます.これは、フレームワークに関係なく、任意のアプリケーションを完全に動作し、RedUx、Vuex、および@ NGRX/ストアからの追加のコンテキストを記録するプラグインがあります.
畝
ログのReduxのアクションと状態に加えて、ログログオンレコードコンソールログ、JavaScriptのエラー、StackTrart、ヘッダー/本文、ブラウザのメタデータ、およびカスタムログを使用してネットワークのリクエスト/応答.また、DOMは、最も複雑な単一ページのアプリのピクセル完璧なビデオを再現、ページ上のHTMLとCSSを記録するために楽器を計る.
畝
Try it for free .
郵便How React Storybook can simplify component testing 最初に現れたLogRocket Blog .