2019年の反応アプリケーションの試験

執筆Peter Ekene Eze ✏️
テストは非常に論争の的なソフトウェア開発の概念です.テストや最良のツールについて、またはテストに適合する優先順位のレベルについて行くために最善の方法で誰もが同意することは困難ですが、我々はすべての同意することができますが、それはすべての製品の非常に重要な側面であり、それはそのように扱われる必要がありますです.
このポストでは、あなたの反応アプリケーションをテストすることについて行くことができる最善の方法のいくつかを詳しく見ていきます.ここで説明する概念は、Vueや他の言語のような他のJavaScriptフレームワークにも適用されますが、事前性については、次のようにしますReact .
我々がそれに入る前に、このポストがテストへの包括的な導入でない点に注意する価値があります.それはあなたが反応のテストについて行くべきである方法(あなたがすでにいないならば)の目のオープナーのより多くです.

必要条件

我々がこれ以上進む前に、この記事は以下を仮定します:

Node.js ≥v6 あなたのマシンにインストールされます

npm あなたのマシンにインストールされます

あなたのマシンにインストール

Create-react-app マシンにインストール

あなたの基本的な理解を持ってReactJS

一般試験概念

あなたがテストの概念に全く新しいならば、これのようにそれを考えてください-テストはあなたがあなたのアプリケーションの活動を自動化する方法です.もちろん、これはすべてのテストにはないが、それはあなたに一般的なアイデアを開始することができます.
テストは、コード調停に等しく役立ちます.複数の貢献者が同じプロジェクトで作業している場合、テストはCodeBaseの個々の部分の機能の正確な部分を指定するのに役立ちます.その結果、システムの問題を検出し、修正を促すことが非常に容易になる.

JavaScriptテストフレームワーク

現在までJest の上で27 K以上の星で最も人気のあるJavaScriptフレームワークをGithub . Facebookによって構築され、FacebookのJestチームによって維持され、サポートされ続けている.JESTはゼロの設定JavaScriptテストフレームワークを推奨し、それは非常に使いやすいです.それは900以上の貢献者とJavaScriptコミュニティによって2019年に非常に印象的な受け入れ率を持っています.
他の人気のある選択肢はMocha and Jasmine . Mochaは、最も使用されるJavaScriptテストフレームワークになると主張します.それは18 K以上の星がありますGithub . Asides巨大な生態系モカは、大きなドキュメンテーションで確立されたオプションを持ちます.また、非常に柔軟であり、多くの拡張にオープンします.
一方、ジャスミンは、公式に推薦されたテストフレームワークであることを証明したAngular.js . 以上の14k stars on Github そして、それは最も資源とコミュニティ支持による最も古いテストフレームワークのうちの1つでもあります.ジェストさえジャスミンの上に築かれました.
これらの枠組みを考慮した上で、明示的な「最善」がないことに注意する価値があります.長い目で見れば、それはすべてあなたのために最善のものになる.このポストでは、我々は我々のデモンストレーションのために冗談を使います.

JESTの設定

デフォルトでは、作成反応アプリケーションは、これらの構成が付属します.しかし、柔軟性と完全性のために、手動で設定する方法を示しますJest with webpack クライアント側では.
ステップ1:実行npm install --save-dev jest プロジェクトディレクトリに
ステップ2:頭にpackage.json アプリケーションのファイルとテストスクリプトを追加します

"script":{
  "test": "jest"
}

ステップ3:次は、我々は設定する必要があります.babelrc.js ファイルにはプリセットがあるのでpackage.json それを指し示す自動的にファイルを拾って、我々のテストの全てにそれを適用してください

const isTest = String(process.env.NODE_ENV ) === 'test'
module.export = {
  presets: [['env', {modules: isTest ? 'commonjs' : false}], 'react'],
  plugins: [
  'syntax-dynamic-import',
  'transform-object-rest-spread',
],
}

これにより、Babelは現在、我々がテストを通過していることを認識できます.

アプリケーションのテスト

反応アプリケーションをテストする方法がいくつかあります.私たちはそれらのいくつかを見るつもりです.

ユニット試験—反応部品

単体テストは、その正当性を検証するために分離されたソフトウェアの個々のユニット/コンポーネントをテストすることを含んでいます.今どのように我々は反応アプリケーションでこれを達成するのですか?ログインコンポーネントがある場合login.js ファイル:

function Login({ onSubmit }) {
  return (
    <div>
      <Form
        onSubmit={e => {
          e.preventDefault()
          const { username, password } = e.target.elements
          onSubmit({
            username: username.value,
            password: password.value,
          })
        }}
      >
        <label style={{ justifySelf: 'right' }} htmlFor="username-input">
          Username
        </label>
        <Input
          id="username-input"
          placeholder="Username..."
          name="username"
          style={{ flex: 1 }}
        />
        <label style={{ justifySelf: 'right' }} id="password-input">
          Password
        </label>
        <Input
          placeholder="Password..."
          type="password"
          name="password"
          aria-labelledby="password-input"
        />
      </Form>
    </div>
  )
}

上記のコードは単純なログインコンポーネントですlogin.test.js ファイル.

import React from 'react'
import ReactDOM from 'react-dom'
import Login from '../login'
  test('calls onSubmit with the username and password when submitted',() => {
    const handleSubmit = jest.fn()
    const container = document.createElement('div')
    const form = container.querySelector('form')
    const {username, password} = form.element 
    username.value = 'Kenny'
    passwords.value = 'pineapples'

    form.dispatchEvent(new window.event('submit'))
      expect{handleSubmit}.toHaveBeenCalledTimes(1)
      exopect{handleSubmit}.toHaveBeenCalledWith({
        username: username.value,
        password: password.value, 
      })
  ReactDOM.render(<Login onSubmit = {handleSubmit} />, container)
  })

テストはAを探すdiv そしてコンテナ変数に渡します.そのコンテナ変数から、querySelector('form') その上に
次に、オブジェクトの破壊を使用してform.element . いわゆるdispatchEvent() Submitイベントでは、送信するイベントが解凍されたときにフォームを行うか、またはどの値を持つかをテストできます.これは、イベントが一度発火されるべきであることを示し、解雇されるとき、ユーザ名とパスワードを持つべきです.

form.dispatchEvent(new window.event('submit'))
  expect{handleSubmit}.toHaveBeenCalledTimes(1)
  exopect{handleSubmit}.toHaveBeenCalledWith({
  username: username.value,
  password: password.value, 
})

そしてもちろん、我々はテストを実行することができますnpm run test .

スナップショットテスト

以前は、特定のコンポーネントをテストすることができました.彼らが想定しているように動作するようにすることができましたが、まだ行っていないことは、ユーザーインターフェイスの構造をテストすることです.スナップショットテストを行うことができます.以下の例を考えてください.

render(){
  <div>
    <p> Current count: {this.state.count}</p>
    <button className = 'increment'
      onClick ={this.increment}>
        + 
    </button>
    <button className = 'decrement'
      onClick ={this.decrement}>
        -
    </button>
  </div>
}

コンポーネントが特定の形式を持っているかどうかを想像してください.デザイナーがこの形式を変更すると、実際にDOMへのレンダリングの形式が変更されます.では、DOMのレンダリング関数への誤った変更を避けるにはどうしたらよいでしょう.
スナップショットテストを使用すると、指定された時間内にコンポーネントのスナップショットを取得し、以前にDOMにレンダリングしたものを格納できます.したがって、コンポーネントのテストを実行すると、ジェスチャでは、既に表示されているスナップショットとは異なるものが表示されます.いずれかの変更を受け入れるか、変更に警告することができます.
このテストを実行するにはreact-test-renderer フォームは、特定の時点で私たちのテストのJSON表現を与える.次に、そのデータをJestで保存します.

import React form 'react'
import Counter from './counter'
import {shallow} from 'enzyme'
import renderer from 'react-test-renderer'

describe('Counter component', () => {
it('matches the snapshot', () => {
  const tree = renderer.create(< Counter/>).toJson()
expect(tree).toMatchSnapshot()
})
it('start with a count of 0', () => {
  const wrapper =shallow(<Counter/>)
  const text = wwrapper.find('p').text()
  expect(tesxt).toEqual('Current count: 0')
})
it('can increment the count when the button is clicked', ()=>{
const wrapper = shallow(<Counter/>)
}

第一に、我々はcounter に格納されるコンポーネント.The expect () メソッドはツリーを引数として受け取ります.

統合テスト

前述のように、統合試験は、個々のユニットが結合され、グループとしてテストされるところである.たとえば、1つのコンテキスト内で2つの関数が一緒に動作している場合は、統合テストを使用して、それらが正しく相互作用することを確認します.最も単純なユースケースを考慮してください.コンポーネントに2つの数字を追加します.

export const add = (x,y)=> x + y

export const total = (Tax,price) => {
  return "$" + add(Tax, price)
}

それからapp.test.js 次のようにします.

import {add,total} from './App' 

test('add', () => {
  expect(add(1,2)).toBe(3)
})

test('total', () =>{
  expect(total(5,20)).toBe(25);
})

推奨テストツール

反応試験ライブラリ

個人的には、これは反応コンポーネントをテストするための素晴らしいツールだと思います.これは、ユーザーの視点からテストに対処します.また、特定の要素のラベルではなく、UIの構成で動作するので、それは本当に便利です.このライブラリがどのように動作するかを示すために、このライブラリを使って書いた前の単体テストを再評価しましょう.

import React from 'react'
import ReactDOM from 'react-dom'
import {render,simulate} from 'react-testing-library'
import Login from '../login'

test('calls onSubmit with the username and password when submitted',() => {
const fakeuser = generate.loginForm
const handleSubmit = jest.fn()
const {container,getByLabelText, getByText} = render(<login onSubmit= {handleSubmit}/>)
const usernameNode = getByLabelText('username')
const passwordNode= getByLabelText('password')
const formNode = container.querySelector('form')
const submitButtonNode = getByText('submit')

上の例では、UIに悩まされているのではなく、それらに関連付けられている名前を取得することによって、要素のテストに集中しました.これは、酵素やサイプレスのような他の選択肢にこのライブラリを使用しての主な利点です.

結論

このポストでは、我々は反応アプリケーションとテストの重要性をテストする様々な方法を見てきました.私はこのポストは、反応のテストの重要性を理解することができますし、あなたがそれについて行くことができる方法を示して願っています.
このポストで何か悪いことを見ている?あなたは正しいバージョンを見つけることができますhere .

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

畝

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