---
# System prepended metadata

title: 2020年10月10日モブプロ#9

---

# 2020年10月10日モブプロ#9

[MDの書き方](https://qiita.com/tbpgr/items/989c6badefff69377da7)

モブプロのコンテンツは🤟がついています。

# 本日の目標
クライアントサイドのテスト実装！

# テストライブラリ参考サイト

- https://testing-library.com/docs/react-testing-library/intro
- https://qiita.com/ossan-engineer/items/4757d7457fafd44d2d2f

# Footerのテストを書いてみよう🤟

```javascript=
describe('Footer', () => {
  describe('Layout', () => {
    it('会社名表示', () => {
      const { container } = render(<Footer />)
      const footer = container.querySelector('h3')
      expect(footer).toHaveTextContent('skywill')
      // const test = render(<Footer />)
      // console.log(test);
    });
  });
});
```

## material-UI使ってるとHTMLの表示わからなく難しい？

そんなときは`screen`を導入。

```javascript=2
import { render, screen } from '@testing-library/react'
```
```javascript=
it('会社名表示', () => {
  const { container } = render(<Footer />)
  screen.debug()
});
```

`screen.debug()`を行うと以下が表示

```javascript=
<body>
  <div>
    <footer
      class="makeStyles-footer-1"
    >
      <div
        class="MuiToolbar-root MuiToolbar-regular makeStyles-footerContainer-2 MuiToolbar-gutters"
      >
        <h3
          class="MuiTypography-root MuiTypography-body1"
          varient="h3"
        >
          Skywill
        </h3>
      </div>
    </footer>
  </div>
</body>
```

これで確認しながらテストを書いていく。

# Headerのテストを書いてみよう🤟

```javascript=
describe('Header', () => {
  describe('Layout', () => {
    it('タイトル表示', () => {
      const { container } = render(<Header />)
      const header = container.querySelector('h4')
      expect(header).toHaveTextContent('Todoアプリ')
    });
  });
});
```

# Appのテストを書いてみよう🤟

## render時にaxiosを呼ぶ

```javascript=3
import App from './App'
import axios from 'axios'

const mockEmptyGetTask = {
  data: []
}

describe('App', () => {
  describe('Lifecycle', () => {
    it('レンダー時にaxiosを呼ぶ url確認', () => {
      axios.get = jest.fn().mockResolvedValue(mockEmptyGetTask)
      render(<App />)
      expect(axios.get).toHaveBeenCalledWith('http://localhost:8000/tasks')
    });
    it('レンダー時にaxiosを呼ぶ 呼び出したか確認', () => {
      axios.get = jest.fn().mockResolvedValue(mockEmptyGetTask)
      render(<App />)
      expect(axios.get).toHaveBeenCalledTimes(1)
    });
  });
});
```

## レイアウトのテスト

```javascript=23
decribe('Layout', () => {
  describe('マウント with no data', () => {
    it('テキストフィールドがあるかどうか', () => {
      const { queryByTestId } = render(<App />)
      const titleTextField = queryByTestId('title-text')
      expect(titleTextField).tobeInTheDocument()
    })
  })
})
```

だが、このままでは`null`なので`App.js`を編集する。

### App.jsの編集

テキストフィールドに`testId`を付与する必要がある。

```jsx=
<TextField
  label="タイトル"
  value={taskTitle}
  onChange={handleTextFieldChanges}
  inputProps={{"data-testid":"title-text"}} // これを追加
/>
```

これでテストを通過することができるようになる。

## 作成ボタンのテスト

```javascript=30
it('作成ボタンがあるかどうか', () =>{
  const {queryByTestId} = render(<App />)
  const createButton = queryByTestId('create-buttun')
  expect(createButton).toBeInTheDocument()
})
```

### App.jsの編集

```jsx=
<Button 
  variant="contained" 
  color="primary" 
  disabled={taskTitle===''} 
  onClick={addTask}
  data-testid="create-button" // これを追加
>
  作成
</Button>
```

## 完了ボタンのテスト

```javascript=35
it('完了ボタンがあるかどうか', () =>{
  const {queryByTestId} = render(<App />)
  const completeButton = queryByTestId('complete-button')
  expect(completeButton).toBeInTheDocument()
})
```

### App.jsの編集

```jsx=
<Button 
  variant="contained" 
  color="primary" 
  disabled={!tasks.some(x=>x.doing)} 
  onClick={() => doneTask()}
  data-testid="complete-button"　// これを追加
>
  完了
</Button>
```

## チェックボックスのテスト

```javascript=40
it('チェックボックスがないこと', () =>{
  const {queryByTestId} = render(<App />)
  const doingCheckBox = queryByTestId('doing-check')
  expect(doingCheckBox).not.toBeInTheDocument()
})
```

### App.jsの編集

```jsx=
<Checkbox 
  disabled={task.done} 
  checked={task.doing} 
  value="primary" 
  onChange={() => handleCheckboxChanges(task)}
  inputProps={{"data-testid":"doing-check"}}
/>
```

## リストの存在テスト

```javascript=45
it('リストがないこと', () =>{
  const {queryByTestId} = render(<App />)
  const listText = queryByTestId('list-text')
  expect(listText).not.toBeInTheDocument()
}) 
```

## 削除ボタンの存在テスト

```javascript=50
it('削除ボタンがないこと', () =>{
  const {queryByTestId} = render(<App />)
  const deleteButton = queryByTestId('delete-button')
  expect(deleteButton).not.toBeInTheDocument()
})
```

## 初期状態でボタンが押せないようになっているかテスト

```javascript=
it('作成ボタンが押せないこと', () =>{
  const {queryByTestId} = render(<App />)
  const createButton = queryByTestId('create-button')
  expect(createButton.disabled).toBeTruthy()
})

it('完了ボタンが押せないこと', () =>{
  const {queryByTestId} = render(<App />)
  const completeButton = queryByTestId('complete-button')
  expect(completeButton.disabled).toBeTruthy()
})
```

## データ取得時に各種ボタンがあるかどうかのテスト

```javascript=
describe('マウント with data', () => {
  beforeEach(() => {
    axios.get = jest.fn().mockResolvedValue(mockSuccessGetTask)
  })
  it('チェックボックスがあること', () =>{
    const {queryByTestId} = render(<App />)
    const doingCheckBox = queryByTestId('doing-check')
    screen.debug()
    expect(doingCheckBox).not.toBeInTheDocument()
  })
  it('リストがあること', () =>{
    const {queryByTestId} = render(<App />)
    const listText = queryByTestId('list-text')
    expect(listText).not.toBeInTheDocument()
  })
  it('削除ボタンがあること', () =>{
    const {queryByTestId} = render(<App />)
    const deleteButton = queryByTestId('delete-button')
    expect(deleteButton).not.toBeInTheDocument()
  })
})
```

上記でエラーになるはずが...なぜか成功してしまう...

次週に持ち越し！