How to use the @testing-library/dom.screen.findByTestId function in @testing-library/dom

it('shows image viewer', async () => {
      const viewer = await screen.findByTestId('image-viewer');
      const img = viewer.querySelector('img');

      expect(img.src).toContain('logo-white.png');
    });
  });

it('shows branch/MR dropdown with master selected', async () => {
      const dropdown = await screen.findByTestId('ide-nav-dropdown');

      expect(dropdown.textContent).toContain('master');
    });
  });

it('shows commit button in disabled state', async () => {
      const button = await screen.findByTestId('begin-commit-button');

      expect(button.getAttribute('disabled')).toBeDefined();
    });

const fillFileNameModal = async (value, submitText = 'Create file') => {
  const modal = await screen.findByTestId('ide-new-entry');

  const nameField = await findByTestId(modal, 'file-name-field');
  fireEvent.input(nameField, { target: { value } });

  const createButton = getByText(modal, submitText, { selector: 'button' });
  createButton.click();
};

const findTreeBody = () => screen.findByTestId('ide-tree-body');

export const commit = async ({ newBranch = false, newMR = false, newBranchName = '' } = {}) => {
  switchLeftSidebarTab('Commit');
  screen.getByTestId('begin-commit-button').click();

  if (!newBranch) {
    const option = await screen.findByLabelText(/Commit to .+ branch/);
    option.click();
  } else {
    const option = await screen.findByLabelText('Create a new branch');
    option.click();

    const branchNameInput = await screen.findByTestId('ide-new-branch-name');
    fireEvent.input(branchNameInput, { target: { value: newBranchName } });

    const mrCheck = await screen.findByLabelText('Start a new merge request');
    if (Boolean(mrCheck.checked) !== newMR) {
      mrCheck.click();
    }
  }

  screen.getByText('Commit').click();
};

const findRootActions = () => screen.findByTestId('ide-root-actions');