概要

CRA(create-react-app)にはテストフレームワークが最初から入っており、テストコードファイルも最初からミニマムで用意してくれています。
試しにサクッとテスト実装を、、、と思ったら冒頭からエラーで手間取ってしまったので、対処結果を書いてみます。

前提

create-react-app : 3.4.1
- テンプレートはtypescriptです
- create-react-app [プロジェクト名] --template typescript
react-scripts : 3.4.1
@testing-library/jest-dom : ^4.2.4
@testing-library/react : ^9.3.2

App.test.tsx

import { render, screen } from '@testing-library/react';

error

"@testing-library/react"' has no exported member 'screen'"

console

yarn remove @testing-library/react @testing-library/jest-dom && yarn add @testing-library/react @testing-library/jest-dom

https://github.com/testing-library/react-testing-library/issues/610#issuecomment-614982674
yarn upgradeでは他のモジュールバージョンも上がって依存関係が解消されないようで、対象モジュールのみを再インストールする必要があるようです。

App.test.tsx

const result = await screen.findByText('xxx', undefined, {timeout: 3000});

error

"MutationObserver is not a constructor"

package.json

- "test": "react-scripts test",
+ "test": "react-scripts test --env=jest-environment-jsdom-fourteen",

新しいライブラリを触った際、文法が正しそうなのにエラーが出ると「まずはTypeScriptの@type~が足りないのかも」など、つい疑ってしまうのですが、ちゃんとissueとか探るのも大事ですね。