🔖

【RN Update 2023年11月】Amplify JS v6がリリース他

2023/11/30に公開

React Native

はじめに

こんにちは！
犬専用の音楽アプリオトとりっぷでエンジニアしています、足立です。

https://www.oto-trip.com/

この記事では、今月の React Native に関連するニュースを紹介します。

ライブラリ情報

【Amplify JS】 v6 がリリース

AWS Amplify の JavaScript クライアントライブラリの v6 がリリースされました！

v6 の大きな変更点は、「バンドルサイズの大幅な削減」と「TypeScript の開発体験向上」です。
（他にも Next.js の middleware サポートなどの Web 向けの変更点もありますが、この記事では割愛します。）

Migration ガイドはこちらにありますが、ライブラリの Import 方法が変更されています。

import { CognitoUser } from '@aws-amplify/auth';
import { Auth } from 'aws-amplify';

const handleSignIn = async ({
  username,
  password
}: {
  username: string;
  password: string;
}) => {
  const user: CognitoUser = Auth.signIn(username, password);
};

import { signIn } from 'aws-amplify/auth';

const handleSignIn = async ({
  username,
  password
}: {
  username: string;
  password: string;
}) => {
  const { isSignUpComplete, userId, nextStep } = signIn({ username, password });
};

また React Native 関連では、amazon-cognito-identity-jsが不要になるのと、ソーシャルサインイン用 UI が大幅に変更になります。

ただし、11 月 30 日時点ではbabel.config.jsのmodule-resolverを使用すると SignIn モジュールが機能しないバグが報告されています。
unstable ブランチではすでに修正されていますが、安定版はまだリリースされていないので使用する際はご注意ください。

【TypeScript】 v5.3 がリリース

TypeScript v5.3 がリリースされました！

個人的に気なる変更点は、以下の 2 つです。

switch (true) Narrowing
Narrowing On Comparisons to Booleans

switch (true) Narrowing

今までは、switch (true) 中の case による絞り込みが期待値通りに機能しなかったんですね。

function f(x: unknown) {
  switch (true) {
    case typeof x === 'string':
      // 'x' is a 'string' here
      console.log(x.toUpperCase());
    // falls through...

    case Array.isArray(x):
      // 'x' is a 'string | any[]' here.
      console.log(x.length);
    // falls through...

    default:
    // 'x' is 'unknown' here.
    // ...
  }
}

Narrowing On Comparisons to Booleans

switch (true) Narrowingの派生系だと思いますが、今後はこんな絞り込みも使えるそうです。

interface A {
  a: string;
}

interface B {
  b: string;
}

type MyType = A | B;

function isA(x: MyType): x is A {
  return 'a' in x;
}

function someFn(x: MyType) {
  if (isA(x) === true) {
    console.log(x.a); // works!
  }
}

積極的に活用していきたいですね！

【React Native Testing Library】 Jest Matchers が従来の Jest Native から built-in に変更

Jest Matchers が従来の Jest Native から built-in に変更されたようです。

私はお恥ずかしながら、React Native Testing Library の Matchers を積極的に利用していなかったので基礎から変更点を見ていきたいと思います。

Jest Matchers について

公式から引用すると、

This guide describes built-in Jest matchers, we recommend using these matchers as they provide readable tests, accessibility support, and a better developer experience.

とのことで、リーダブルテストやアクセスビリティサポートの視点で有用なようです。

リーダブルテスト視点では toBeOnTheScreen という Matchers を使用すると、以下のように element tree にアクセスしてテストすることが可能です。

toBeOnTheScreen

function ShowChildren({ show }: { show: boolean }) {
  return show ? (
    <View>
      <Text testID="text">Hello</Text>
    </View>
  ) : (
    <View />
  );
}

test('toBeOnTheScreen() on detached element', () => {
  render(<ShowChildren show={true} />);

  const element = screen.getByTestId('text');
  // Next line will unmount the element, yet `element` variable will still hold reference to it.
  screen.update(<ShowChildren show={false} />);

  expect(element).toBeTruthy();
  expect(element).not.toBeOnTheScreen();
  expect(() => expect(element).toBeOnTheScreen())
    .toThrowErrorMatchingInlineSnapshot(`
    "expect(element).toBeOnTheScreen()
    element could not be found in the element tree"
  `);
});

今までもこのような機能が Jest Native から提供されていたんですね。

built-in への変更

上記toBeOnTheScreenなど含め、多くの機能は変更なくそのまま利用可能だそうです。
大きな変更として、toHaveAccessibilityStateが削除されて個別の状態をチェックできるようになったようです。

Jest Native

expect(screen.getByRole('button', { name: 'Home' })).toHaveAccessibilityState(
  { selected: true }
);
expect(
  screen.getByRole('button', { name: 'Settings' })
).toHaveAccessibilityState({ selected: false });

built-in

expect(screen.getByRole('button', { name: 'Home' })).toBeSelected();
expect(screen.getByRole('button', { name: 'Settings' })).not.toBeSelected();

直感的にテストが書けそうですね！

React Native 関連情報

【React Native】 Road to 0.73.0

10 月末にリリース予定だった React Native 0.73 が予定より遅れているようです。
ディスカッションが以下の PR にて実施されています。

個別内容について一つ一つを具体的に理解できていないため概略になりますが、RC への PR 状況を眺めると Fabric に関するバグ対応が多いですね。
11 月 29 日にもJFabricUIManagerに関するバグが React Native Reanimated のメンテナーから報告されているようです。
首を長くして、楽しみに待ちたいと思います。

最後に

ここまで読んでいただきありがとうございました。

もし犬専用の音楽アプリに興味を持っていただけたら、ぜひダウンロードしてみてください！