Структурирование компонентов для модульных тестов с помощью React и TypeScript

Question

Я только сейчас больше занимаюсь тестированием. Но чем больше я узнаю, тем больше понимаю, что способ, которым я структурировал компоненты React в моем приложении, может быть не идеальным для тестирования. Например Пример приложения чата, в котором можно следить за разговорами, следующая кнопка выглядит следующим образом:

const FollowButton: React.FC<IProps> = (props) => {

    const contributorUUIDList = useMemo(() => props.conversation.contributors.map(e => e.uuid), [props.conversation]);
    if (!props.user.token) {
        return (<Button><Link to="/user/registration/">Follow</Link></Button>)
    }

    if (props.user.token && contributorUUIDList.indexOf(props.user.uuid) !== -1) {
        return <div></div>
    }

    const renderButton = (user, conversation) => {
        if (!user.token) return(<Link to="/user/login/"><Button>Follow</Button></Link>);
        if (user.followed_conversations.indexOf(conversation.uuid) !== -1) return(
            <ButtonTwo onClick={() => props.removeFollower(props.conversation)}>Unfollow</ButtonTwo>
        )
        return(<Button onClick={() => props.addFollower(props.conversation)}>Follow</Button>)
    }

    return(
        <>
            {renderButton(props.user, props.conversation)}
        </>
    )
}

export default FollowButton;

Этот компонент кажется мне слишком юнитом для юнит-тестирования, поскольку он требует очень сложных макетов данных, которые включают в себя:

• Состояние, в котором пользователь вошел в систему и вышел из системы
• Состояние, в котором пользователь уже следует за беседой и не следует за беседой

Каждый объект состояния будет содержать около 20-30 строк кода макета данных. Это кажется мне крайне неэффективным. Сейчас я ищу способы, которыми я должен был бы структурировать свой компонент в первую очередь. У меня есть два вопроса относительно моего подхода:

1.) Как мне обрабатывать / поддерживать все ложные данные в приложении с ~ 150 компонентами?

2.) Желательно не работать со сложными объектами в компонентах и ​​вместо этого передайте логический реквизит (isLoggedIn, hasAlreadyFollow ...)?

Спасибо!