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コンポーネントの変更がスナップショットに反映されたということです。
まとめ
テストが失敗する原因は、自分が書いたコードの変更だけでなく、外部ライブラリの変更ということもあります。
外部ライブラリの変更には気をつけましょう。