あなたの最初の反応単位テストを書く方法

ようこそ！

我々が去ったところ－GitHub
今日やっていること
煙テストを作成する

我々の最初のTDD反復を実行する

テスト駆動開発の三つの法則

あなたが失敗した単体テストを書くまで、あなたは生産コードを書くかもしれません.

あなたは失敗するのに十分であるより多くの単位テストを書きません、そして、コンパイルが失敗していないかもしれません.

は、現在失敗しているテストを通過するのに十分であるより多くの生産コードを書くかもしれません.

最初の単体テストの作成

私たちがどこで止まったかを続ける前に、私はTitle.tsxと呼ばれるウェブページのタイトルの別のコンポーネントを作成しました.

今、我々はすべてのセットアップを持って、テストを書きましょう.
まず、componentという新しいテストコンポーネントを作成します.
このテストのために、我々は非常に単純な何かをしています.このテストは、テキストのすべてのボディを行う必要があります何かではない、今のところ、それはTDDの例として動作します.

test('once rendered title is visible', () => {

})

タイトルコンポーネントをマウントすることから始めます.

const { render } = require("@testing-library/react")
import Title from './Title'

test('once rendered title is visible', () => {
  render(<Title />)
})

今、実際にテストを実行するには、アプリケーションが既に実行している場合は、新しい端末を開き、srcを実行します.したがって、現在の出力は以下のようになります.

現在、我々はそれを失敗させる必要があります.タイトルを見つけてみましょう

レンダリングされるものを得るためには、Title.test.jsという別のインポートを必要とするので、テキストを“samuel preston”で画面上の任意の要素を見つけることができます.

const { render, screen } = require("@testing-library/react")
import Title from './Title'

test('once rendered, title is visible', () => {
  render(<Title />)

  screen.getByText(/samuel preston/i)
})

これにより、以下のような出力が得られます.

さて、この要件を満たすコードを書きましょう.タイトルコンポーネントに戻り、「Samuel Preston」を含む新しいH 1要素を作成します.

function Title() {
  return (
    <>
      <h1>
        Samuel Preston
      </h1>
    </>
  )
}

ファイルを保存したら、テスト端末を再実行してください.

これは、このプロジェクト内のTDDの旅の最初の反復をマークします.

ギタブ

我々がどこにいるかについて見るために、各々のポストの終わりに最終的なコミットにこのlinkに続くことができます!