ref(tests): Use screen for querying in RTL

tests/js/spec/components/avatar.spec.tsx

@@ -1,4 +1,4 @@
-import {mountWithTheme} from 'sentry-test/reactTestingLibrary';
+import {mountWithTheme, screen} from 'sentry-test/reactTestingLibrary';
 
 import AvatarComponent from 'app/components/avatar';
 import {Avatar} from 'app/types';
@@ -31,18 +31,18 @@ describe('Avatar', function () {
 
   describe('render()', function () {
     it('has `avatar` className', function () {
-      const {getByTestId} = mountWithTheme(<AvatarComponent user={user} />);
+      mountWithTheme(<AvatarComponent user={user} />);
 
-      const avatarElement = getByTestId(`${avatar.avatarType}-avatar`);
+      const avatarElement = screen.getByTestId(`${avatar.avatarType}-avatar`);
       expect(avatarElement).toBeInTheDocument();
       expect(avatarElement).toHaveAttribute('title', user.name);
     });
 
     it('should show a gravatar when avatar type is gravatar', async function () {
-      const {getByTestId, findByRole} = mountWithTheme(<AvatarComponent user={user} />);
+      mountWithTheme(<AvatarComponent user={user} />);
 
-      expect(getByTestId(`${avatar.avatarType}-avatar`)).toBeInTheDocument();
-      const avatarImage = await findByRole('img');
+      expect(screen.getByTestId(`${avatar.avatarType}-avatar`)).toBeInTheDocument();
+      const avatarImage = await screen.findByRole('img');
       expect(avatarImage).toHaveAttribute(
         'src',
         `${gravatarBaseUrl}/avatar/a94c88e18c44e553497bf642449b6398?d=404&s=120`
@@ -52,40 +52,40 @@ describe('Avatar', function () {
     it('should show an upload when avatar type is upload', async function () {
       avatar.avatarType = 'upload';
 
-      const {getByTestId, findByRole} = mountWithTheme(<AvatarComponent user={user} />);
+      mountWithTheme(<AvatarComponent user={user} />);
 
-      expect(getByTestId(`${avatar.avatarType}-avatar`)).toBeInTheDocument();
-      const avatarImage = await findByRole('img');
+      expect(screen.getByTestId(`${avatar.avatarType}-avatar`)).toBeInTheDocument();
+      const avatarImage = await screen.findByRole('img');
       expect(avatarImage).toHaveAttribute('src', `/avatar/${avatar.avatarUuid}/?s=120`);
     });
 
     it('should show an upload with the correct size (static 120 size)', async function () {
       const avatar1 = mountWithTheme(<AvatarComponent user={user} size={76} />);
-      expect(await avatar1.findByRole('img')).toHaveAttribute(
+      expect(await screen.findByRole('img')).toHaveAttribute(
         'src',
         `/avatar/${avatar.avatarUuid}/?s=120`
       );
 
       avatar1.unmount();
 
       const avatar2 = mountWithTheme(<AvatarComponent user={user} size={121} />);
-      expect(await avatar2.findByRole('img')).toHaveAttribute(
+      expect(await screen.findByRole('img')).toHaveAttribute(
         'src',
         `/avatar/${avatar.avatarUuid}/?s=120`
       );
 
       avatar2.unmount();
 
       const avatar3 = mountWithTheme(<AvatarComponent user={user} size={32} />);
-      expect(await avatar3.findByRole('img')).toHaveAttribute(
+      expect(await screen.findByRole('img')).toHaveAttribute(
         'src',
         `/avatar/${avatar.avatarUuid}/?s=120`
       );
 
       avatar3.unmount();
 
-      const avatar4 = mountWithTheme(<AvatarComponent user={user} size={1} />);
-      expect(await avatar4.findByRole('img')).toHaveAttribute(
+      mountWithTheme(<AvatarComponent user={user} size={1} />);
+      expect(await screen.findByRole('img')).toHaveAttribute(
         'src',
         `/avatar/${avatar.avatarUuid}/?s=120`
       );
@@ -94,60 +94,54 @@ describe('Avatar', function () {
     it('should not show upload or gravatar when avatar type is letter', function () {
       avatar.avatarType = 'letter_avatar';
 
-      const {getByTestId, getByText} = mountWithTheme(<AvatarComponent user={user} />);
+      mountWithTheme(<AvatarComponent user={user} />);
 
-      expect(getByTestId(`${avatar.avatarType}-avatar`)).toBeInTheDocument();
-      expect(getByText(userNameInitials)).toBeInTheDocument();
+      expect(screen.getByTestId(`${avatar.avatarType}-avatar`)).toBeInTheDocument();
+      expect(screen.getByText(userNameInitials)).toBeInTheDocument();
     });
 
     it('use letter avatar by default, when no avatar type is set and user has an email address', function () {
-      const {getByTestId, getByText} = mountWithTheme(
-        <AvatarComponent user={{...user, avatar: undefined}} />
-      );
+      mountWithTheme(<AvatarComponent user={{...user, avatar: undefined}} />);
 
-      expect(getByTestId(`${avatar.avatarType}-avatar`)).toBeInTheDocument();
-      expect(getByText(userNameInitials)).toBeInTheDocument();
+      expect(screen.getByTestId(`${avatar.avatarType}-avatar`)).toBeInTheDocument();
+      expect(screen.getByText(userNameInitials)).toBeInTheDocument();
     });
 
     it('should show a gravatar when no avatar type is set and user has an email address', function () {
-      const {getByTestId} = mountWithTheme(
-        <AvatarComponent gravatar user={{...user, avatar: undefined}} />
-      );
+      mountWithTheme(<AvatarComponent gravatar user={{...user, avatar: undefined}} />);
 
-      const avatarElement = getByTestId(`gravatar-avatar`);
+      const avatarElement = screen.getByTestId(`gravatar-avatar`);
       expect(avatarElement).toBeInTheDocument();
       expect(avatarElement).toHaveAttribute('title', user.name);
     });
 
     it('should not show a gravatar when no avatar type is set and user has no email address', function () {
-      const {getByTestId, getByText} = mountWithTheme(
+      mountWithTheme(
         <AvatarComponent gravatar user={{...user, email: '', avatar: undefined}} />
       );
 
-      expect(getByTestId(`letter_avatar-avatar`)).toBeInTheDocument();
-      expect(getByText(userNameInitials)).toBeInTheDocument();
+      expect(screen.getByTestId(`letter_avatar-avatar`)).toBeInTheDocument();
+      expect(screen.getByText(userNameInitials)).toBeInTheDocument();
     });
 
     it('can display a team Avatar', function () {
       // @ts-expect-error
       const team = TestStubs.Team({slug: 'test-team_test'});
 
-      const {getByText, getByTestId} = mountWithTheme(<AvatarComponent team={team} />);
+      mountWithTheme(<AvatarComponent team={team} />);
 
-      expect(getByTestId(`letter_avatar-avatar`)).toBeInTheDocument();
-      expect(getByText('TT')).toBeInTheDocument();
+      expect(screen.getByTestId(`letter_avatar-avatar`)).toBeInTheDocument();
+      expect(screen.getByText('TT')).toBeInTheDocument();
     });
 
     it('can display an organization Avatar', function () {
       // @ts-expect-error
       const organization = TestStubs.Organization({slug: 'test-organization'});
 
-      const {getByTestId, getByText} = mountWithTheme(
-        <AvatarComponent organization={organization} />
-      );
+      mountWithTheme(<AvatarComponent organization={organization} />);
 
-      expect(getByTestId(`letter_avatar-avatar`)).toBeInTheDocument();
-      expect(getByText('TO')).toBeInTheDocument();
+      expect(screen.getByTestId(`letter_avatar-avatar`)).toBeInTheDocument();
+      expect(screen.getByText('TO')).toBeInTheDocument();
     });
 
     it('displays platform list icons for project Avatar', function () {
@@ -157,9 +151,9 @@ describe('Avatar', function () {
         platform: 'java',
       });
 
-      const {getByRole} = mountWithTheme(<AvatarComponent project={project} />);
+      mountWithTheme(<AvatarComponent project={project} />);
 
-      const platformIcon = getByRole('img');
+      const platformIcon = screen.getByRole('img');
       expect(platformIcon).toBeInTheDocument();
       expect(platformIcon).toHaveAttribute(
         'data-test-id',
@@ -171,9 +165,9 @@ describe('Avatar', function () {
       // @ts-expect-error
       const project = TestStubs.Project({platform: 'java'});
 
-      const {getByRole} = mountWithTheme(<AvatarComponent project={project} />);
+      mountWithTheme(<AvatarComponent project={project} />);
 
-      const platformIcon = getByRole('img');
+      const platformIcon = screen.getByRole('img');
       expect(platformIcon).toBeInTheDocument();
       expect(platformIcon).toHaveAttribute(
         'data-test-id',
@@ -185,9 +179,9 @@ describe('Avatar', function () {
       // @ts-expect-error
       const project = TestStubs.Project({platforms: [], platform: 'java'});
 
-      const {getByRole} = mountWithTheme(<AvatarComponent project={project} />);
+      mountWithTheme(<AvatarComponent project={project} />);
 
-      const platformIcon = getByRole('img');
+      const platformIcon = screen.getByRole('img');
       expect(platformIcon).toBeInTheDocument();
       expect(platformIcon).toHaveAttribute(
         'data-test-id',

tests/js/spec/components/avatar/avatarList.spec.tsx

@@ -1,4 +1,4 @@
-import {mountWithTheme} from 'sentry-test/reactTestingLibrary';
+import {mountWithTheme, screen} from 'sentry-test/reactTestingLibrary';
 
 import AvatarList from 'app/components/avatar/avatarList';
 
@@ -16,10 +16,10 @@ describe('AvatarList', () => {
       {...user, id: '2', name: 'BC'},
     ];
 
-    const {container, queryByTestId, getByText} = renderComponent(users);
-    expect(getByText('A')).toBeTruthy();
-    expect(getByText('B')).toBeTruthy();
-    expect(queryByTestId('avatarList-collapsedusers')).toBeNull();
+    const {container} = renderComponent(users);
+    expect(screen.getByText('A')).toBeTruthy();
+    expect(screen.getByText('B')).toBeTruthy();
+    expect(screen.queryByTestId('avatarList-collapsedusers')).toBeNull();
 
     expect(container).toSnapshot();
   });
@@ -34,14 +34,14 @@ describe('AvatarList', () => {
       {...user, id: '6', name: 'FG'},
     ];
 
-    const {container, getByTestId, queryByText, queryAllByText} = renderComponent(users);
-    expect(queryAllByText(users[0].name.charAt(0))).toBeTruthy();
-    expect(queryAllByText(users[1].name.charAt(0))).toBeTruthy();
-    expect(queryAllByText(users[2].name.charAt(0))).toBeTruthy();
-    expect(queryAllByText(users[3].name.charAt(0))).toBeTruthy();
-    expect(queryAllByText(users[4].name.charAt(0))).toBeTruthy();
-    expect(queryByText(users[5].name.charAt(0))).toBeNull();
-    expect(getByTestId('avatarList-collapsedusers')).toBeTruthy();
+    const {container} = renderComponent(users);
+    expect(screen.queryAllByText(users[0].name.charAt(0))).toBeTruthy();
+    expect(screen.queryAllByText(users[1].name.charAt(0))).toBeTruthy();
+    expect(screen.queryAllByText(users[2].name.charAt(0))).toBeTruthy();
+    expect(screen.queryAllByText(users[3].name.charAt(0))).toBeTruthy();
+    expect(screen.queryAllByText(users[4].name.charAt(0))).toBeTruthy();
+    expect(screen.queryByText(users[5].name.charAt(0))).toBeNull();
+    expect(screen.getByTestId('avatarList-collapsedusers')).toBeTruthy();
     expect(container).toSnapshot();
   });
 });

tests/js/spec/components/banner.spec.tsx

@@ -1,20 +1,20 @@
-import {fireEvent, mountWithTheme} from 'sentry-test/reactTestingLibrary';
+import {fireEvent, mountWithTheme, screen} from 'sentry-test/reactTestingLibrary';
 
 import Banner from 'app/components/banner';
 
 describe('Banner', function () {
   it('can be dismissed', function () {
-    const wrapper = mountWithTheme(<Banner dismissKey="test" title="test" />);
-    expect(wrapper.getByText('test')).toBeInTheDocument();
+    mountWithTheme(<Banner dismissKey="test" title="test" />);
+    expect(screen.getByText('test')).toBeInTheDocument();
 
-    fireEvent.click(wrapper.getByLabelText('Close'));
+    fireEvent.click(screen.getByLabelText('Close'));
 
-    expect(wrapper.queryByText('test')).toBeNull();
+    expect(screen.queryByText('test')).toBeNull();
     expect(localStorage.getItem('test-banner-dismissed')).toBe('true');
   });
 
   it('is not dismissable', function () {
-    const wrapper = mountWithTheme(<Banner isDismissable={false} />);
-    expect(wrapper.queryByLabelText('Close')).toBeNull();
+    mountWithTheme(<Banner isDismissable={false} />);
+    expect(screen.queryByLabelText('Close')).toBeNull();
   });
 });

tests/js/spec/components/breadcrumbs.spec.jsx

@@ -1,4 +1,9 @@
-import {fireEvent, mountWithTheme, waitFor} from 'sentry-test/reactTestingLibrary';
+import {
+  fireEvent,
+  mountWithTheme,
+  screen,
+  waitFor,
+} from 'sentry-test/reactTestingLibrary';
 
 import Breadcrumbs from 'app/components/breadcrumbs';
 
@@ -42,22 +47,22 @@ describe('Breadcrumbs', () => {
   });
 
   it('generates correct links', () => {
-    const wrapper = createWrapper();
-    fireEvent.click(wrapper.getByText('Test 1'));
+    createWrapper();
+    fireEvent.click(screen.getByText('Test 1'));
     expect(routerContext.context.router.push).toHaveBeenCalledWith('/test1');
-    fireEvent.click(wrapper.getByText('Test 2'));
+    fireEvent.click(screen.getByText('Test 2'));
     expect(routerContext.context.router.push).toHaveBeenCalledWith('/test2');
   });
 
   it('does not make links where no `to` is provided', () => {
-    const wrapper = createWrapper();
-    fireEvent.click(wrapper.getByText('Test 3'));
+    createWrapper();
+    fireEvent.click(screen.getByText('Test 3'));
     expect(routerContext.context.router.push).not.toHaveBeenCalled();
   });
 
   it('renders a crumb dropdown', async () => {
     const onSelect = jest.fn();
-    const wrapper = mountWithTheme(
+    mountWithTheme(
       <Breadcrumbs
         crumbs={[
           {
@@ -77,13 +82,13 @@ describe('Breadcrumbs', () => {
       />,
       {context: routerContext}
     );
-    fireEvent.mouseOver(wrapper.getByText('dropdown crumb'));
+    fireEvent.mouseOver(screen.getByText('dropdown crumb'));
 
     await waitFor(() => {
-      expect(wrapper.getByText('item3')).toBeInTheDocument();
+      expect(screen.getByText('item3')).toBeInTheDocument();
     });
 
-    fireEvent.click(wrapper.getByText('item3'));
+    fireEvent.click(screen.getByText('item3'));
     expect(onSelect).toHaveBeenCalledWith(
       expect.objectContaining({label: 'item3'}),
       expect.anything(),

tests/js/spec/components/button.spec.tsx

@@ -1,4 +1,4 @@
-import {fireEvent, mountWithTheme} from 'sentry-test/reactTestingLibrary';
+import {fireEvent, mountWithTheme, screen} from 'sentry-test/reactTestingLibrary';
 
 import Button from 'app/components/button';
 
@@ -36,23 +36,23 @@ describe('Button', function () {
 
   it('calls `onClick` callback', function () {
     const spy = jest.fn();
-    const {getByText} = mountWithTheme(<Button onClick={spy}>Click me</Button>, {
+    mountWithTheme(<Button onClick={spy}>Click me</Button>, {
       context: routerContext,
     });
-    fireEvent.click(getByText('Click me'));
+    fireEvent.click(screen.getByText('Click me'));
 
     expect(spy).toHaveBeenCalled();
   });
 
   it('does not call `onClick` on disabled buttons', function () {
     const spy = jest.fn();
-    const {getByText} = mountWithTheme(
+    mountWithTheme(
       <Button onClick={spy} disabled>
         Click me
       </Button>,
       {context: routerContext}
     );
-    fireEvent.click(getByText('Click me'));
+    fireEvent.click(screen.getByText('Click me'));
 
     expect(spy).not.toHaveBeenCalled();
   });

tests/js/spec/components/buttonBar.spec.tsx

@@ -1,4 +1,4 @@
-import {mountWithTheme} from 'sentry-test/reactTestingLibrary';
+import {mountWithTheme, screen} from 'sentry-test/reactTestingLibrary';
 
 import Button from 'app/components/button';
 import ButtonBar from 'app/components/buttonBar';
@@ -15,8 +15,8 @@ describe('ButtonBar', function () {
     );
 
   it('has "Second Button" as the active button in the bar', function () {
-    const {getByLabelText} = createWrapper();
-    expect(getByLabelText('First Button')).not.toHaveClass('active');
-    expect(getByLabelText('Second Button')).toHaveClass('active');
+    createWrapper();
+    expect(screen.getByLabelText('First Button')).not.toHaveClass('active');
+    expect(screen.getByLabelText('Second Button')).toHaveClass('active');
   });
 });