Unit Test - smiyawaki0820/tutorial-react GitHub Wiki

import sum from './math.js';

describe('sum', () => {
  test('sums up two values', () => {
    expect(sum(2, 4)).toBe(6);
  });
});

// src/App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

// src/App.test.tsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  // 対象コンポーネントのレンダリング
  render(<App />);
  // screen: レンダしたコンポーネント内の要素にアクセスする際に用いる
  // - getByText: 
  // - getByRole: セレクタにアクセスする
  const linkElement = screen.getByText(/learn react/i);
  // expect: 検証対象に対するテストを行うための
  // - toBeInTheDocument(): 
  // - toBeDisabled(): ボタン要素が disabled になっているか検証
  expect(linkElement).toBeInTheDocument();
});

import {screen, getByLabelText} from '@testing-library/dom'

// screen を使用する場合（単に document.body にアクセスするだけなら screen を推奨）
const inputNode1 = screen.getByLabelText('Username')

// screen を使用せずにコンテナを使用する場合
const container = document.querySelector('#app')
const inputNode2 = getByLabelText(container, 'Username')

// 文字列マッチ
screen.getByText('Hello World') // full string match
screen.getByText('llo Worl', {exact: false}) // substring match
screen.getByText('hello world', {exact: false}) // ignore case

// 正規表現
screen.getByText(/World/) // substring match
screen.getByText(/world/i) // substring match, ignore case
screen.getByText(/^hello world$/i) // full string match, ignore case
screen.getByText(/Hello W?oRlD/i) // substring match, ignore case, searches for "hello world" or "hello orld"

// カスタム関数
screen.getByText((content, element) => content.startsWith('Hello'))

// 正規化
screen.getByText('text', {
  normalizer: getDefaultNormalizer({trim: false}),   // trim, collapseWhitespace など
})

import { useState, useCallback } from 'react'

// 初期値を props として渡すことでテストが容易になる
export default function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue)
  const increment = useCallback(() => setCount((x) => x + 1), [])
  const reset = useCallback(() => setCount(initialValue), [initialValue])
  return { count, increment, reset }
}

import { renderHook } from '@testing-library/react-hooks'
import useCounter from './useCounter'

test('should use counter', () => {
  let initialValue = 0
  const { result, rerender } = renderHook(() => useCounter(initialValue))

  expect(result.current.count).toBe(initialValue)
  expect(typeof result.current.increment).toBe('function')

  // update
  act(() => {                   // フックがブラウザ上でどのように動作するかシミュレート
    result.current.increment()  // 値を更新
  })

  expect(result.current.count).toBe(initialValue+1)

  initialValue = 10
  rerender()

  act(() => {
    result.current.reset()
  })

  expect(result.current.count).toBe(10)
})

import { renderHook, act } from '@testing-library/react-hooks'        // will attempt to auto-detect
import { renderHook, act } from '@testing-library/react-hooks/dom'    // will use react-dom
import { renderHook, act } from '@testing-library/react-hooks/native' // will use react-test-renderer
import { renderHook, act } from '@testing-library/react-hooks/server' // will use react-dom/server