2021-08-25 TIL

こしょう

Jestと親しくなる中

javascript基礎が不足しているようなので、勉強を始めました.

Feelings(感覚・主観)

の課題をしたが、満足していない.もっと頑張ろう

JS文法を勉強したいと思いました.

Findings(ラーニングポイント)

テストの作成(jest)

test/it:テスト時に使用するキーワードを作成します.(単一試験ユニット)

  test('socket connect test', (done) => {
      socket.on('connect', () => {
        done();
      });
  });

descripe:descripeキーワードを使用して、複数のテストケースを組み合わせることができます.

describe('socket.io test', () => {
    beforeAll(() => {
      ...
    });

    afterAll(() => {
     ...
    });

    test('socket connect test', (done) => {
      ...
    });

    test('[EMIT] \'enter_room\' event test', (done) => {
      ...
    });
  });

詳細はjest

以下の方法はすべて範囲があります.書き込みはグローバルですべてのテストに適用され、1つの説明ではその説明のテストにのみ適用されます.例は上記のコードと同じです.

afterAll(fn,timeout):すべてのテストが終了した後に1回実行します.
afterEach(fn,timeout):テストが終了するたびに実行されます.
beforeAll(fn,timeout):すべてのテストが開始される前に1回実行します.
beforeEach(fn,timeout):1つのテストが開始される前に実行されます.

JestのMock関数は、関数に渡されたコールバックが呼び出されたか、またはコールバック関数がバインドされたイベントがトリガーされたときに呼び出されたコールバックをテストするために使用することができる.

toBeInTheDocument

<span data-testid="html-element"><span>Html Element</span></span>
<svg data-testid="svg-element"></svg>

expect(
  getByTestId(document.documentElement, 'html-element'),
).toBeInTheDocument()
expect(getByTestId(document.documentElement, 'svg-element')).toBeInTheDocument()
expect(
  queryByTestId(document.documentElement, 'does-not-exist'),
).not.toBeInTheDocument()

toHaveAttribute

指定された要素に属性があるかどうかを確認します.

<button data-testid="ok-button" type="submit" disabled>ok</button>

const button = getByTestId('ok-button')

expect(button).toHaveAttribute('disabled')
expect(button).toHaveAttribute('type', 'submit')
expect(button).not.toHaveAttribute('type', 'button')

expect(button).toHaveAttribute('type', expect.stringContaining('sub'))
expect(button).toHaveAttribute('type', expect.not.stringContaining('but'))

jestリファレンスサイト
https://velog.io/@velopert/tdd-with-react-testing-library
https://github.com/testing-library/jest-dom#tohaveattribute
https://testing-library.com/

確認(自己宣言)

困难のためあきらめないで、引き続き努力しましょう!