4 files changed, 22 insertions, 12 deletions
diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx
index e6e710ff3..26939c7ce 100644
--- a/src/view/com/profile/ProfileFollowers.tsx
+++ b/src/view/com/profile/ProfileFollowers.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react'
+import React, {useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
 import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native'
 import {
@@ -19,7 +19,7 @@ export const ProfileFollowers = observer(function ProfileFollowers({
   name: string
 }) {
   const store = useStores()
-  const [view, setView] = useState<UserFollowersViewModel | undefined>()
+  const [view, setView] = React.useState<UserFollowersViewModel | undefined>()
 
   useEffect(() => {
     if (view?.params.user === name) {
diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx
index 73e765d19..03c5b13bb 100644
--- a/src/view/com/profile/ProfileFollows.tsx
+++ b/src/view/com/profile/ProfileFollows.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react'
+import React, {useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
 import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native'
 import {
@@ -10,7 +10,7 @@ import {Link} from '../util/Link'
 import {Text} from '../util/text/Text'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {UserAvatar} from '../util/UserAvatar'
-import {s, colors} from '../../lib/styles'
+import {s} from '../../lib/styles'
 import {usePalette} from '../../lib/hooks/usePalette'
 
 export const ProfileFollows = observer(function ProfileFollows({
@@ -19,7 +19,7 @@ export const ProfileFollows = observer(function ProfileFollows({
   name: string
 }) {
   const store = useStores()
-  const [view, setView] = useState<UserFollowsViewModel | undefined>()
+  const [view, setView] = React.useState<UserFollowsViewModel | undefined>()
 
   useEffect(() => {
     if (view?.params.user === name) {
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index a4d7c7a92..4fd766952 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -147,7 +147,7 @@ export const ProfileHeader = observer(function ProfileHeader({
   // =
   if (view.hasError) {
     return (
-      <View>
+      <View testID="profileHeaderHasError">
         <Text>{view.error}</Text>
       </View>
     )
@@ -192,6 +192,7 @@ export const ProfileHeader = observer(function ProfileHeader({
         <View style={[styles.buttonsLine]}>
           {isMe ? (
             <TouchableOpacity
+              testID="profileHeaderEditProfileButton"
               onPress={onPressEditProfile}
               style={[styles.btn, styles.mainBtn, pal.btn]}>
               <Text type="button" style={pal.text}>
@@ -214,7 +215,9 @@ export const ProfileHeader = observer(function ProfileHeader({
                   </Text>
                 </TouchableOpacity>
               ) : (
-                <TouchableOpacity onPress={onPressToggleFollow}>
+                <TouchableOpacity
+                  testID="profileHeaderToggleFollowButton"
+                  onPress={onPressToggleFollow}>
                   <LinearGradient
                     colors={[gradient[1], gradient[0]]}
                     start={{x: 0, y: 0}}
@@ -257,6 +260,7 @@ export const ProfileHeader = observer(function ProfileHeader({
         </View>
         <View style={styles.metricsLine}>
           <TouchableOpacity
+            testID="profileHeaderFollowersButton"
             style={[s.flexRow, s.mr10]}
             onPress={onPressFollowers}>
             <Text type="body2" style={[s.bold, s.mr2, pal.text]}>
@@ -268,6 +272,7 @@ export const ProfileHeader = observer(function ProfileHeader({
           </TouchableOpacity>
           {view.isUser ? (
             <TouchableOpacity
+              testID="profileHeaderFollowsButton"
               style={[s.flexRow, s.mr10]}
               onPress={onPressFollows}>
               <Text type="body2" style={[s.bold, s.mr2, pal.text]}>
@@ -280,6 +285,7 @@ export const ProfileHeader = observer(function ProfileHeader({
           ) : undefined}
           {view.isScene ? (
             <TouchableOpacity
+              testID="profileHeaderMembersButton"
               style={[s.flexRow, s.mr10]}
               onPress={onPressMembers}>
               <Text type="body2" style={[s.bold, s.mr2, pal.text]}>
@@ -350,7 +356,9 @@ export const ProfileHeader = observer(function ProfileHeader({
       </View>
       {view.isScene && view.creator === store.me.did ? (
         <View style={[styles.sceneAdminContainer, pal.border]}>
-          <TouchableOpacity onPress={onPressInviteMembers}>
+          <TouchableOpacity
+            testID="profileHeaderInviteMembersButton"
+            onPress={onPressInviteMembers}>
             <LinearGradient
               colors={[gradient[1], gradient[0]]}
               start={{x: 0, y: 0}}
@@ -369,6 +377,7 @@ export const ProfileHeader = observer(function ProfileHeader({
         </View>
       ) : undefined}
       <TouchableOpacity
+        testID="profileHeaderAviButton"
         style={[pal.view, {borderColor: pal.colors.background}, styles.avi]}
         onPress={onPressAvi}>
         <UserAvatar
diff --git a/src/view/com/profile/ProfileMembers.tsx b/src/view/com/profile/ProfileMembers.tsx
index 7f566c198..a63de9e32 100644
--- a/src/view/com/profile/ProfileMembers.tsx
+++ b/src/view/com/profile/ProfileMembers.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react'
+import React, {useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
 import {ActivityIndicator, FlatList, View} from 'react-native'
 import {MembersViewModel, MemberItem} from '../../../state/models/members-view'
@@ -12,7 +12,8 @@ export const ProfileMembers = observer(function ProfileMembers({
   name: string
 }) {
   const store = useStores()
-  const [view, setView] = useState<MembersViewModel | undefined>()
+  // Using default import (React.use...) instead of named import (use...) to be able to mock store's data in jest environment
+  const [view, setView] = React.useState<MembersViewModel | undefined>()
 
   useEffect(() => {
     if (view?.params.actor === name) {
@@ -37,7 +38,7 @@ export const ProfileMembers = observer(function ProfileMembers({
     view.params.actor !== name
   ) {
     return (
-      <View>
+      <View testID="profileMembersActivityIndicatorView">
         <ActivityIndicator />
       </View>
     )
@@ -68,7 +69,7 @@ export const ProfileMembers = observer(function ProfileMembers({
     />
   )
   return (
-    <View>
+    <View testID="profileMembersFlatList">
       <FlatList
         data={view.members}
         keyExtractor={item => item._reactKey}