diff --git a/app/components/user_list/__snapshots__/index.test.tsx.snap b/app/components/user_list/__snapshots__/index.test.tsx.snap
new file mode 100644
index 000000000..e71b66fab
--- /dev/null
+++ b/app/components/user_list/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,817 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/channel_list_row should show no results 1`] = `
+
+
+
+
+
+
+ J
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ johndoe
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`components/channel_list_row should show results and tutorial 1`] = `
+
+
+
+
+
+
+ J
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ johndoe
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`components/channel_list_row should show results no tutorial 1`] = `
+
+
+
+
+
+
+ J
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ johndoe
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/app/components/user_list/index.test.tsx b/app/components/user_list/index.test.tsx
new file mode 100644
index 000000000..26560b535
--- /dev/null
+++ b/app/components/user_list/index.test.tsx
@@ -0,0 +1,116 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import Database from '@nozbe/watermelondb/Database';
+import React from 'react';
+
+import {renderWithEverything} from '@test/intl-test-helper';
+import TestHelper from '@test/test_helper';
+
+import UserList from '.';
+
+describe('components/channel_list_row', () => {
+ let database: Database;
+ const user: UserProfile = {
+ id: '1',
+ create_at: 1111,
+ update_at: 1111,
+ delete_at: 0,
+ username: 'johndoe',
+ auth_service: '',
+ email: 'john@doe.com',
+ nickname: '',
+ first_name: '',
+ last_name: '',
+ position: '',
+ roles: '',
+ locale: '',
+ notify_props: {
+ channel: 'true',
+ comments: 'never',
+ desktop: 'mention',
+ desktop_sound: 'true',
+ email: 'true',
+ first_name: 'true',
+ mention_keys: '',
+ push: 'mention',
+ push_status: 'away',
+ },
+ };
+ beforeAll(async () => {
+ const server = await TestHelper.setupServerDatabase();
+ database = server.database;
+ });
+
+ it('should show no results', () => {
+ const wrapper = renderWithEverything(
+ {
+ // noop
+ }}
+ fetchMore={() => {
+ // noop
+ }}
+ loading={true}
+ selectedIds={{}}
+ showNoResults={true}
+ tutorialWatched={true}
+ />,
+ {database},
+ );
+
+ expect(wrapper.toJSON()).toMatchSnapshot();
+ });
+
+ it('should show results no tutorial', () => {
+ const wrapper = renderWithEverything(
+ {
+ // noop
+ }}
+ fetchMore={() => {
+ // noop
+ }}
+ loading={true}
+ selectedIds={{}}
+ showNoResults={true}
+ tutorialWatched={true}
+ />,
+ {database},
+ );
+
+ expect(wrapper.toJSON()).toMatchSnapshot();
+ });
+
+ it('should show results and tutorial', () => {
+ const wrapper = renderWithEverything(
+ {
+ // noop
+ }}
+ fetchMore={() => {
+ // noop
+ }}
+ loading={true}
+ selectedIds={{}}
+ showNoResults={false}
+ tutorialWatched={false}
+ />,
+ {database},
+ );
+
+ expect(wrapper.toJSON()).toMatchSnapshot();
+ });
+});
diff --git a/app/screens/create_direct_message/user_list.tsx b/app/components/user_list/index.tsx
similarity index 100%
rename from app/screens/create_direct_message/user_list.tsx
rename to app/components/user_list/index.tsx
diff --git a/app/screens/create_direct_message/create_direct_message.tsx b/app/screens/create_direct_message/create_direct_message.tsx
index 84ae6d50d..6c42d0ffc 100644
--- a/app/screens/create_direct_message/create_direct_message.tsx
+++ b/app/screens/create_direct_message/create_direct_message.tsx
@@ -11,6 +11,7 @@ import {fetchProfiles, fetchProfilesInTeam, searchProfiles} from '@actions/remot
import CompassIcon from '@components/compass_icon';
import Loading from '@components/loading';
import Search from '@components/search';
+import UserList from '@components/user_list';
import {General} from '@constants';
import {useServerUrl} from '@context/server';
import {useTheme} from '@context/theme';
@@ -23,7 +24,6 @@ import {changeOpacity, getKeyboardAppearanceFromTheme, makeStyleSheetFromTheme}
import {displayUsername, filterProfilesMatchingTerm} from '@utils/user';
import SelectedUsers from './selected_users';
-import UserList from './user_list';
const START_BUTTON = 'start-conversation';
const CLOSE_BUTTON = 'close-dms';
diff --git a/app/screens/integration_selector/index.tsx b/app/screens/integration_selector/index.tsx
index 3c2f10986..dba209902 100644
--- a/app/screens/integration_selector/index.tsx
+++ b/app/screens/integration_selector/index.tsx
@@ -12,6 +12,7 @@ import {fetchChannels, searchChannels} from '@actions/remote/channel';
import {fetchProfiles, searchProfiles} from '@actions/remote/user';
import FormattedText from '@components/formatted_text';
import SearchBar from '@components/search';
+import {createProfilesSections} from '@components/user_list';
import UserListRow from '@components/user_list_row';
import {General, View as ViewConstants} from '@constants';
import {useServerUrl} from '@context/server';
@@ -28,8 +29,6 @@ import {changeOpacity, getKeyboardAppearanceFromTheme, makeStyleSheetFromTheme}
import {typography} from '@utils/typography';
import {filterProfilesMatchingTerm} from '@utils/user';
-import {createProfilesSections} from '../create_direct_message/user_list';
-
import ChannelListRow from './channel_list_row';
import CustomList, {FLATLIST, SECTIONLIST} from './custom_list';
import OptionListRow from './option_list_row';