React HRR Test Patern\u0131: Bile\u015fen Testlerinde Yeni Bir Yakla\u015f\u0131m<\/p>\n
Merhaba! Fatih Soysal olarak, React geli\u015ftirme s\u00fcrecinde kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z zorluklar\u0131 ve bunlar\u0131n \u00fcstesinden gelme yollar\u0131n\u0131 payla\u015fmaya devam ediyorum. Bug\u00fcn, bile\u015fen testlerinde kod tekrar\u0131n\u0131 azaltmak ve testlerimizi daha temiz, okunabilir ve s\u00fcrd\u00fcr\u00fclebilir hale getirmek i\u00e7in kullanabilece\u011fimiz g\u00fc\u00e7l\u00fc bir y\u00f6ntem olan HRR (Higher-Order Render-Reuse) test patern\u0131ndan<\/strong> bahsedece\u011fim. Bu patern, \u00f6zellikle karma\u015f\u0131k bile\u015fenleri test ederken b\u00fcy\u00fck avantajlar sa\u011flar.<\/p>\n \u00d6ncelikle, geleneksel test yakla\u015f\u0131mlar\u0131nda s\u0131kl\u0131kla kar\u015f\u0131la\u015f\u0131lan sorunlara bakal\u0131m. Karma\u015f\u0131k bir bile\u015fenin farkl\u0131 durumlar\u0131n\u0131 test ederken, ayn\u0131 render i\u015flemini bir\u00e7ok kez tekrarlamak zorunda kalabiliriz. Bu durum, kodun okunabilirli\u011fini azalt\u0131r ve bak\u0131m\u0131 zorla\u015ft\u0131r\u0131r. Ayr\u0131ca, k\u00fc\u00e7\u00fck bir de\u011fi\u015fiklik bile, bir\u00e7ok test dosyas\u0131nda g\u00fcncelleme yapmay\u0131 gerektirebilir. \u0130\u015fte bu noktada HRR devreye giriyor.<\/p>\n HRR, daha y\u00fcksek seviyeli bir fonksiyon kullanarak bile\u015fenlerin render edilmesini ve test edilmesini soyutlar. Bu sayede, ayn\u0131 render i\u015flemini tekrar tekrar yazmak zorunda kalmay\u0131z. A\u015fa\u011f\u0131daki \u00f6rnekte, bir buton bile\u015feninin testini HRR kullanarak nas\u0131l basitle\u015ftirebilece\u011fimizi g\u00f6rebilirsiniz:<\/p>\n G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, HRR kullanarak kod tekrar\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azaltm\u0131\u015f olduk. Bu yakla\u015f\u0131m, testlerimizin daha okunabilir ve s\u00fcrd\u00fcr\u00fclebilir olmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, bile\u015fenlerinizin karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131k\u00e7a HRR’nin avantajlar\u0131 daha da belirgin hale gelir. Ba\u015fka bir deyi\u015fle, karma\u015f\u0131k bile\u015fenlerde, bu yakla\u015f\u0131m\u0131 mutlaka denemelisiniz.<\/p>\n Bu makalede, React bile\u015fenlerini test etmenin daha verimli bir yolunu sunan HRR patern\u0131n\u0131 inceledik. Umar\u0131m bu bilgiler size yard\u0131mc\u0131 olmu\u015ftur. Daha fazla React geli\u015ftirme ipucu ve teknikleri i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz. Ayr\u0131ca, konuyla ilgili daha fazla bilgi i\u00e7in bu ba\u011flant\u0131ya<\/a> g\u00f6z atabilirsiniz.<\/p>\n #Etiketler <\/body>\n\/\/ Geleneksel yakla\u015f\u0131m (tekrarl\u0131 kod)\ntest('Buton t\u0131kland\u0131\u011f\u0131nda fonksiyon \u00e7al\u0131\u015f\u0131r', () => {\n const mockFn = jest.fn();\n const {getByText, fireEvent} = render(<Button onClick={mockFn} text=\"T\u0131kla\"><\/Button>);\n fireEvent.click(getByText('T\u0131kla'));\n expect(mockFn).toHaveBeenCalled();\n});\n\ntest('Buton devre d\u0131\u015f\u0131 ise t\u0131klanamaz', () => {\n const mockFn = jest.fn();\n const {getByText, fireEvent} = render(<Button onClick={mockFn} text=\"T\u0131kla\" disabled><\/Button>);\n fireEvent.click(getByText('T\u0131kla'));\n expect(mockFn).not.toHaveBeenCalled();\n});\n\n\n\/\/ HRR kullanarak (kod tekrar\u0131 azalt\u0131lm\u0131\u015f)\nconst renderButton = (props) => render(<Button {...props} text=\"T\u0131kla\" \/>);\n\ntest('Buton t\u0131kland\u0131\u011f\u0131nda fonksiyon \u00e7al\u0131\u015f\u0131r', () => {\n const mockFn = jest.fn();\n const {getByText, fireEvent} = renderButton({onClick: mockFn});\n fireEvent.click(getByText('T\u0131kla'));\n expect(mockFn).toHaveBeenCalled();\n});\n\ntest('Buton devre d\u0131\u015f\u0131 ise t\u0131klanamaz', () => {\n const mockFn = jest.fn();\n const {getByText, fireEvent} = renderButton({onClick: mockFn, disabled: true});\n fireEvent.click(getByText('T\u0131kla'));\n expect(mockFn).not.toHaveBeenCalled();\n});\n<\/code><\/pre>\n
\nReact, HRR, Higher-Order Render-Reuse, Bile\u015fen Testi, Unit Test, JavaScript, Yaz\u0131l\u0131m Testi, Test Patern\u0131, Fatih Soysal<\/p>\n
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"React HRR Test Patern\u0131: Bile\u015fen Testlerinde Yeni Bir Yakla\u015f\u0131m Merhaba! Fatih Soysal olarak, React geli\u015ftirme s\u00fcrecinde kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z zorluklar\u0131…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-8753","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n