手順1：
依存関係を更新する
依存関係を更新する
手順6： 更新をテストする
手順6： 更新をテストする
オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、最新のリリースノートを参照してください。
6.1 jest.config.jsを更新する
transformIgnorePatternsに@amazon-devices/react-native-keplerを含める必要があります。パッケージ4.0.0では、jest/setup.jsファイルでESモジュール構文が使用されています。このパターンがない場合、Jestは「SyntaxError: Cannot use import statement outside a module」というエラーで失敗します。
module.exports = {
preset: 'react-native',
setupFilesAfterEnv: ['<ルートディレクトリ>/jest.setup.js'],
transformIgnorePatterns: [
'node_modules/(?!((jest-)?react-native|@react-native(-community)?|@amazon-devices/react-native-kepler)|react-native-safe-area-context)',
],
};
6.2 jest.setup.jsを作成してTV向けのモックを定義する
RN 0.83では、テスト環境でのモックの動作が変更されています。次の例のように、TVに適したモックを定義するセットアップファイルを作成します。
// jest.setup.js
/**
* TVプラットフォーム向けにDimensions APIのモックを定義します。
* Fire TVデバイスでは1920x1080（フルHD）の解像度とスケール係数1を使用します。
*/
jest.mock('react-native/Libraries/Utilities/Dimensions', () => ({
get: jest.fn().mockReturnValue({
width: 1920,
height: 1080,
scale: 1,
fontScale: 1,
}),
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
}));
/**
* TVプラットフォーム向けにPixelRatio APIのモックを定義します。
* TVデバイスではスケール係数1を使用します（ピクセルの拡大なし）。
*/
jest.mock('react-native/Libraries/Utilities/PixelRatio', () => ({
default: {
get: jest.fn().mockReturnValue(1),
getFontScale: jest.fn().mockReturnValue(1),
getPixelSizeForLayoutSize: jest.fn((layoutSize) => layoutSize),
roundToNearestPixel: jest.fn((layoutSize) => layoutSize),
},
}));
/**
* NativeAnimatedModuleのモックを定義します。RN 0.83では特定の23個のメソッドが呼び出されます。
* ナビゲーションアニメーションをトリガーするすべてのテストに必要です。
*/
jest.mock('react-native/Libraries/Animated/NativeAnimatedModule', () => ({
__esModule: true,
default: {
startOperationBatch: jest.fn(),
finishOperationBatch: jest.fn(),
createAnimatedNode: jest.fn(),
updateAnimatedNodeConfig: jest.fn(),
getValue: jest.fn(),
startListeningToAnimatedNodeValue: jest.fn(),
stopListeningToAnimatedNodeValue: jest.fn(),
connectAnimatedNodes: jest.fn(),
disconnectAnimatedNodes: jest.fn(),
startAnimatingNode: jest.fn(),
stopAnimation: jest.fn(),
setAnimatedNodeValue: jest.fn(),
setAnimatedNodeOffset: jest.fn(),
flattenAnimatedNodeOffset: jest.fn(),
extractAnimatedNodeOffset: jest.fn(),
connectAnimatedNodeToView: jest.fn(),
disconnectAnimatedNodeFromView: jest.fn(),
restoreDefaultValues: jest.fn(),
dropAnimatedNode: jest.fn(),
addAnimatedEventToView: jest.fn(),
removeAnimatedEventFromView: jest.fn(),
addListener: jest.fn(),
removeListeners: jest.fn(),
},
}));
6.3 Jestモックの.defaultのエクスポートを修正する
RN 0.83では、多くの内部モジュールがexport defaultを使用するように変更されています。既存のJestモックが.defaultプロパティのないプレーンなオブジェクトを返している場合、実行時にコンポーネントがundefinedを受け取ることになり、そこで問題が発生します。
症状：複数のテストスイートで「Cannot read properties of undefined (reading 'create')」が発生します。
影響を受けるモジュール
react-native/Libraries/StyleSheet/StyleSheetreact-native/Libraries/StyleSheet/flattenStylereact-native/Libraries/EventEmitter/NativeEventEmitterreact-native/Libraries/Utilities/Platformreact-native/Libraries/Utilities/Dimensionsreact-native/Libraries/Utilities/PixelRatioreact-native/Libraries/Utilities/useWindowDimensionsreact-native/Libraries/BatchedBridge/NativeModules
オブジェクト型のエクスポートパターンの修正
// ❌ 更新前（RN 0.83で問題が発生）
jest.mock('react-native/Libraries/StyleSheet/StyleSheet', () => ({
create: (styles) => styles,
flatten: jest.fn(),
}));
// ✅ 変更後 - __esModuleとdefaultを含める
jest.mock('react-native/Libraries/StyleSheet/StyleSheet', () => {
const impl = {
create: (styles) => styles,
flatten: jest.fn(),
};
return { __esModule: true, default: impl, ...impl };
});
関数型のエクスポートパターンの修正
// 関数型のデフォルトエクスポートでは、関数を直接defaultとして返します。
jest.mock('react-native/Libraries/StyleSheet/flattenStyle', () => {
const impl = jest.fn((style) => style);
return { __esModule: true, default: impl };
});
6.4 テストファイルを更新してact()でラップする
React 19では、次の例に示すように、テスト内の状態更新をact()でラップする必要があります。
// ❌ 更新前（RN 0.72）
import 'react-native';
import React from 'react';
import App from '../App';
import renderer from 'react-test-renderer';
it('正しくレンダリングされる', () => {
renderer.create(<App />);
});
// ✅ 更新後（RN 0.83）- react-test-rendererを直接使用
import React from 'react';
import ReactTestRenderer from 'react-test-renderer';
import App from '../App';
test('正しくレンダリングされる', async () => {
await ReactTestRenderer.act(() => {
ReactTestRenderer.create(<App />);
});
});
@testing-library/react-native
@testing-library/react-nativeを使用する場合ば、テストライブラリによってact()が内部で処理されます。このため、render()をReactTestRenderer.act()でラップしないでください。ラップすると、「Can't access .root on unmounted test renderer」というエラーが発生します。
// ✅ @testing-library/react-nativeを使用する場合の正しい例
import { render, fireEvent } from '@testing-library/react-native';
test('正しくレンダリングされる', () => {
const screen = render(<App />);
expect(screen).toMatchSnapshot();
});
test('ボタン押下を処理する', () => {
const screen = render(<App />);
fireEvent.press(screen.getByTestId('myButton'));
expect(screen).toMatchSnapshot();
});
6.5 ナビゲーションスタックのタイマーのリークを修正する
react-navigation__stackを使用している場合、そのCard.tsxファイルで使用されるアニメーションのsetTimeoutコールバックが、Jestでテスト環境が破棄された後に呼び出されます。
症状：You are trying to import a file after the Jest environment has been torn down
修正：影響を受けるテストファイルに以下を追加します。
beforeEach(() => jest.useFakeTimers());
afterEach(() => {
jest.runOnlyPendingTimers();
jest.useRealTimers();
});
6.6 isolatedModulesの型のエクスポートエラーを修正する
TypeScriptから「TS1205: Re-exporting a type when 'isolatedModules' is enabled requires using 'export type'」というエラーが報告される場合は、次の例のように型のエクスポートを更新します。
// ❌ 更新前
export { Cookie } from './types/CookieManagerTypes';
// ✅ 更新後
export type { Cookie } from './types/CookieManagerTypes';
6.7 スナップショットを更新する
テストの修正がすべて完了したら、スナップショットを再生成します。
# テストを実行してエラーを確認します。
npm test
# すべてのスナップショットを更新します。
npm test -- -u
変更点を確認します。React 19のスナップショットには、次のような違いがあることが想定されます。
- コンポーネントラッパー構造の変更
- 属性の順序の違い
- テキストノードのレンダリングの変更
- 非同期境界の更新
コミットする前に、git diffを使用してスナップショットの変更点を確認してください。
Last updated: 2026年7月9日
