はじめに

ゆとり世代の中野です。

今回チャレンジした内容は【ExpoのProjectにJestを導入する】です。

さっそくチャレンジについて書いていきます。

チャレンジする背景

テストコードを書ける環境がほしい

チャレンジ内容

• テストを実行できるようにする

結論

• できました

やり方

packageの追加

• 必要なpackageをインストールする

expo install jest-expo jest
yarn add --dev ts-node

• package.jsonのscriptsにtestを追加

...
"scripts": {
    "test": "jest",
...

Jestの設定ファイルを作成

• jest.config.tsをProjectのルートディレクトリに作成

テストを追加する

• 対象の未編集状態のApp.tsx

• App.tsxにApp.test.tsxというファイルを作りテストコードを書きます

import React from 'react';
import renderer from 'react-test-renderer';

import App from './App';

describe('<App />', () => {
  it('has 1 child', () => {
    const tree = renderer.create(<App />).toJSON();
    expect(tree.children.length).toBe(1);
  });
});

テストを実行する

• yarn test App.
• PASSしていたら成功

参考元

Testing with Jest - Expo Documentation

This guide explains how to set up Jest in your project, write a unit test, write a snapshot test, and common problems people encounter when using Jest in React Native. Jest is the most widely used JavaScript unit testing framework, so you may already be familiar with it.

docs.expo.dev

Expo の TypeScript プロジェクトで自動テスト

最近は Expo で React Native もやってます 🙂 今回は、Expo のプロジェクトを Jest でテストしたい。基本的に Testing with Jest - Expo Documentation にしたがって進めればいいのだが、TypeScript の場合は多少設定を変える必要がある。この記事では以下のポイントを紹介する。 Expo の TypeScript プロジェクトで Jest を使うときの設定 Jest の設定ファイルも TypeScript で書く方法 なお、手元の環境は次の通り。 $ expo --version 4.0.17 $ npm list expo my-expo-app └── expo@40.0.0 まずは、必要なパッケージをインストールする。jest パッケージではなく jest-expo をインストールするのが Expo 流。 $ npm i

zenn.dev

まとめ

• 必要なpackageを追加する
• 設定ファイルを作成する
• テストコードを書く
• 実行する

さいごに

ExpoでもJestを使ってテストが書ける環境が作れました

yutanakano

WEBエンジニア

大阪生まれのゆとり世代です

趣味はバイクでツーリングに行くこと

愛車は Ninja ZX-25R SE KRT EDITION

Expoでプロダクトを作っています