LoginSignup
0
0

More than 5 years have passed since last update.

React NativeのaccessibilityIgnoresInvertColorsとスナップショットテスト

Posted at

React Nativeのコンポーネントにスナップショットテストを実行したら、以下の1行が追加されていました。

accessibilityIgnoresInvertColors={true}

しかし、ソースコードにはaccessibilityIgnoresInvertColors={true}を追加していません。
そもそも、accessibilityIgnoresInvertColorsとは?

accessibilityIgnoresInvertColors

Accessibility API Updates
accessibilityIgnoresInvertColors
We exposed Apple's api AccessibilityIgnoresInvertColors to JavaScript, so now when you have a view where you don't want colors to be inverted (e.g image), you can set this property to true, and it won't be inverted.

These new properties will become available in the React Native 0.57 release.

  • 色を反転させたくないView(例えば、画像)にこのプロパティをセットすると、色が反転しない
  • このプロパティはReact Native 0.57で利用可能になる

だそうです。

ImageBackground

スナップショットテストに戻ります。
スナップショットとテスト対象のコンポーネントを照らし合わせて、accessibilityIgnoresInvertColorsがセットされているコンポーネントはImageBackgroundだと推測しました。

react-native/Libraries/Image/ImageBackground.js

render() {
  const {children, style, imageStyle, imageRef, ...props} = this.props;

  return (
    <View
      accessibilityIgnoresInvertColors={true}
      style={style}
      ref={this._captureRef}>
      <Image
        {...props}

accessibilityIgnoresInvertColors={true}がセットされています。
つまり、ImageBackgroundコンポーネントの変更がスナップショットに反映されたということです。

まとめ

テストが失敗する原因は、自分が書いたコードの変更だけでなく、外部ライブラリの変更ということもあります。
外部ライブラリの変更には気をつけましょう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0