From 5ce0539a10ca8c8cb8bf57174a288930e6c5f3fb Mon Sep 17 00:00:00 2001
From: Arkadiusz Bachorski
 <60391032+arkadiuszbachorski@users.noreply.github.com>
Date: Wed, 29 May 2024 23:02:16 +0200
Subject: [PATCH] Use screen instead of destructing render (#21)

# Use screen instead of destructing render

## :recycle: Current situation & Problem

Destructing `render` to get selectors binds result of render to
selectors. Sometimes it's unwanted, especially if creating some reusable
functions across the tests.

This binding is completely unnecessary, doesn't benefit tests
readability and ease of development. It's easier to use `screen`
everywhere, because of auto-completion and lack of maintenance of
destructed properties.

## :gear: Release Notes
* Use screen instead of destructing render


### Code of Conduct & Contributing Guidelines

By submitting creating this pull request, you agree to follow our [Code
of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md):
- [x] I agree to follow the [Code of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md).

---------

Co-authored-by: Paul Schmiedmayer <PSchmiedmayer@users.noreply.github.com>
---
 app/page.test.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/page.test.tsx b/app/page.test.tsx
index c41e1a4..df14aee 100644
--- a/app/page.test.tsx
+++ b/app/page.test.tsx
@@ -6,16 +6,15 @@
 // SPDX-License-Identifier: MIT
 //
 
-import React from 'react'
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import Home from './page'
 
 describe('Home Component', () => {
   it('renders the Stanford Biodesign Digital Health Next.js Template heading', () => {
-    const { getByText } = render(<Home />)
+    render(<Home />)
 
-    const headingElement = getByText(
+    const headingElement = screen.getByText(
       /Welcome to the Stanford Biodesign Digital Health Next.js Template/i,
     )
 
@@ -23,9 +22,9 @@ describe('Home Component', () => {
   })
 
   it('renders the Stanford Biodesign Logo', () => {
-    const { getByAltText } = render(<Home />)
+    render(<Home />)
 
-    const imageElement = getByAltText(
+    const imageElement = screen.getByAltText(
       'Stanford Biodesign Logo',
     ) as HTMLImageElement