Gatsbyのブログにjestとreact-testing-libraryを入れてテスト可能にする

2021-07-19JestGatsbyTestingLibrary


基本的には下記を見ながら進めることで問題なかった

Unit Testing | Gatsby

Testing React Components | Gatsby

進めていたら途中で詰まった

  • src/components/tests/header.ts
import React from "react"
import {render, screen} from "@testing-library/react"
import '@testing-library/jest-dom/extend-expect'

const Title = () => <h1 data-testid="hero-title">Gatsby is awesome!</h1>;

describe("Bio", () => {
  it("renders correctly", () => {
    const { getByTestId } = render(<Title />);
    expect(getByTestId("hero-title")).toHaveTextContent("Gatsby is awesome!");
  })
})
❯ yarn test
yarn run v1.22.10
$ jest --config ./jest.config.js
 FAIL  src/components/__tests__/header.ts
  ● Test suite failed to run

    SyntaxError: /home/user/til/src/components/__tests__/header.ts: Unexpected token, expected "," (7:25)

       6 |
    >  7 | const Title = () => (<h1 data-testid="hero-title">Gatsby is awesome!</h1>);
         |                          ^
       8 |
       9 | describe("Bio", () => {

タグの解釈がうまく行かない?

TypeScript関連のようだがよくわからんということでうだうだ調べていた

よく考えれば分かることだがTypeScriptなのにReactの記法が書いてあるのでそりゃそうなるよねって感じだった

拡張子をts -> tsxにして次に進めた

 FAIL  src/components/__tests__/header.tsx
  Bio
    ✕ renders correctly (2 ms)

  ● Bio › renders correctly
                                                                                                                                                                                                    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.

デフォルトのテスト環境がnodeである

レンダリングなどをするテストの場合はjsdom環境に変更してあげる必要がある

変更はテストファイルの先頭にコメントを入れることで可能

Jestの設定 · Jest

全体に適用する場合は jest.config.jsに項目を追加する

  • jest.config.js
module.exports = {
  .....
  .....
  .....
  testEnvironment: 'jsdom',
}
$ yarn test
yarn run v1.22.10
$ jest --config ./jest.config.js
 PASS  src/components/__tests__/header.tsx
  Bio
    ✓ renders correctly (23 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.013 s, estimated 2 s
Ran all test suites.
Done in 2.31s.

これで動くところまで持っていけたのでテスト書くぞ