វិធីធ្វើតេស្ដឡើងវិញទៅក្នុង ReactJS Codebases ដោយមិនចាំបាច់ធ្វើតេស្ត

ការសាកល្បងកម្មវិធី និងធ្វើឱ្យវាងាយស្រួលក្នុងការធ្វើដូច្នេះបានចាប់អារម្មណ៍របស់ខ្ញុំអស់រយៈពេលពីរបីឆ្នាំមកហើយ។ ចំណាប់អារម្មណ៍នេះឥឡូវនេះផ្តោតលើកម្មវិធីផ្នែកខាងមុខដែលធ្លាប់មាន។ កាន់តែពិសេសសម្រាប់កម្មវិធី reactjs ។ វាមានរយៈពេលពីរបីខែហើយដែលខ្ញុំបានចូលទៅក្នុងកូដ reactjs ដែលមានអាយុពី 5 ទៅ 10 ឆ្នាំដែលកំពុងផ្តល់ឱ្យខ្ញុំនូវការយល់ដឹង និងបញ្ហាប្រឈម។

ខ្ញុំផ្ទាល់ត្រូវបានបង្កើតកូដ reactjs អស់រយៈពេលពីរបីឆ្នាំឥឡូវនេះ។ គម្រោងប្រភពបើកចំហមួយក្នុងចំណោមគម្រោងប្រភពបើកចំហដំបូងដែលខ្ញុំបានចែករំលែកត្រូវបានគេហៅថា អាចសាកល្បងបាន ។ វាត្រូវបានចេញផ្សាយនៅឆ្នាំ 2020 ឬច្រើនជាងនេះ ហើយចាប់តាំងពីពេលនោះមក ខ្ញុំបានឧទ្ទិសផ្នែកមួយនៃផ្លូវរៀនរបស់ខ្ញុំទៅ reactjs ។

ថ្មីៗនេះ ខ្ញុំបានធ្វើការលើគម្រោងប្រភពបើកចំហផ្សេងទៀតដែលផ្តោតលើផ្នែកដែលអាចសាកល្បងបាននៃវត្ថុដូចជា json-tool និង text-tool ; កម្មវិធីទាំងពីរគឺជាប្រភពបើកចំហ និងត្រូវបានដាក់ឱ្យប្រើប្រាស់នៅលើ Snapcraft ។ បន្ថែមពីលើវា ខ្ញុំបានដំណើរការការពិសោធន៍ជាញឹកញាប់នៅក្នុងឃ្លាំងមួយដែលមានឈ្មោះថា reactjs-playground ។ វាជាកន្លែងដែលខ្ញុំពិសោធន៍ជាមួយលក្ខណៈពិសេស reactjs ហើយលះបង់ម៉ោងសិក្សារបស់ខ្ញុំទៅវា។ បទពិសោធន៍ដែលខ្ញុំទទួលបានក្នុងឆ្នាំទាំងនោះនៅក្នុងគម្រោងដែលមានប្រភពជិតស្និត និងគម្រោងប្រភពបើកចំហបានផ្តល់ឱ្យខ្ញុំនូវមូលដ្ឋានគ្រឹះដែលអនុញ្ញាតឱ្យខ្ញុំកំណត់អត្តសញ្ញាណកំហុស និងគុណសម្បត្តិទូទៅមួយចំនួន។

រណ្តៅ

អ្នកអភិវឌ្ឍន៍ដែលចូលរួមក្នុងគំរូ និងឧបករណ៍ reactjs ដឹងថាប្លុកអគារដែលបណ្ណាល័យផ្តល់ជូនមានភាពងាយស្រួលក្នុងការយល់ និងសរសេរ។ គំនិតអរូបីបំផុតនៃសមាសភាគមួយអាចត្រូវបានប្រើដើម្បីសរសេរចំណុចប្រទាក់អ្នកប្រើយ៉ាងឆាប់រហ័ស។ ទោះយ៉ាងណាក៏ដោយ វាក៏អាចជាប្រភពនៃកំហុសនៅពេលនិយាយអំពីរចនាសម្ព័ន្ធនៃឋានានុក្រមនៃសមាសធាតុមួយ។ ការបំផ្លាញប្រព័ន្ធគឺជាប្រធានបទ ដែលត្រូវបានសិក្សាអស់ជាច្រើនឆ្នាំ។

សមាសធាតុធំ

ទំហំនៃការរួបរួមនៃការអរូបីនៅក្នុងកម្មវិធីគឺជាប្រធានបទនៃការពិភាក្សាផងដែរ។ អ្នកខ្លះប្រកែកថាវិធីសាស្រ្ត និងថ្នាក់គួរតែមានចំនួនបន្ទាត់តិចតួច ខណៈពេលដែលអ្នកផ្សេងទៀតចូលចិត្តមានបំណែកធំជាង និងមានរចនាសម្ព័ន្ធល្អ។ ដូចនៅក្នុងគម្រោងកម្មវិធីណាមួយដោយមិនគិតពីទំហំនោះទេ ខ្ញុំមានបំណងចង់ទំហំដែលផ្តល់បរិបទកាន់តែច្រើន និងបង្កើតការកកិតតិចជាងនៅលើបន្ទុកការយល់ដឹងពេលកំពុងអានកូដ។

ចៃដន្យឬអត់ តាមបទពិសោធន៍របស់ខ្ញុំ ខ្ញុំយល់ថាវាអាចទៅរួច នៅពេលដែលខ្ញុំកំណត់ព្រំដែនយ៉ាងល្អសម្រាប់បំណែកនៃកូដដែលខ្ញុំកំពុងធ្វើការរួមជាមួយនឹងបរិបទអាជីវកម្ម។ ខ្ញុំមិនទាន់រកឃើញលេខវេទមន្តនៅឡើយទេ ប៉ុន្តែការវាស់វែងរបស់ខ្ញុំបានក្លាយជាចំនួនលោតដែលខ្ញុំត្រូវធ្វើរវាងឯកសារ ដើម្បីយល់ពីអ្វីដែលខ្ញុំត្រូវធ្វើ។

លោតច្រើនតាមដែលខ្ញុំត្រូវធ្វើ នោះខ្ញុំត្រូវកាន់បរិបទ និងព័ត៌មានកាន់តែច្រើននៅក្នុងក្បាលរបស់ខ្ញុំ។ វាក្លាយជាការលំបាកខណៈពេលដែលរក្សាមូលដ្ឋានកូដ។ ការបំផ្លិចបំផ្លាញសមាសធាតុទាំងនោះគឺជាបញ្ហាប្រឈមមួយ ទោះជាយ៉ាងណាក៏ដោយ ចាំបាច់ត្រូវយកមកពិចារណាសម្រាប់ការថែរក្សាមូលដ្ឋានកូដឱ្យកាន់តែប្រសើរឡើង។

រដ្ឋសកល

សម្រាប់ការអភិវឌ្ឍន៍វិជ្ជាជីវៈ រដ្ឋសកលគឺជាតម្រូវការមូលដ្ឋាន។ សម្រាប់កម្មវិធី reactjs វាមិនខុសគ្នាទេ។ ស្ថានភាពសកលត្រូវបានប្រទះឃើញយ៉ាងងាយស្រួលដោយអ្នកប្រើប្រាស់កម្មវិធី។ ប្រសិនបើអ្នកកំពុងទិញអ្វីមួយ ហើយអ្នកបន្ថែមផលិតផលទៅក្នុងរទេះរបស់អ្នក អ្នកអាចឃើញចំនួនទំនិញដែលអ្នកបានបន្ថែម។ នេះគឺជារដ្ឋសកល។

នៅក្នុងកម្មវិធី reactjs កញ្ចប់គ្រប់គ្រងរដ្ឋជាសកលដែលធ្លាប់ប្រើយ៉ាងទូលំទូលាយ redux ឥឡូវនេះបានកាត់បន្ថយការប្រើប្រាស់របស់វានៅក្នុងការពេញចិត្តនៃបរិបទតូចៗជុំវិញព្រំដែននៅក្នុងកម្មវិធី។ ទោះជាយ៉ាងណាក៏ដោយ សហគមន៍បានចែករំលែកមតិផ្សេងគ្នាលើតម្រូវការប្រើប្រាស់ redux សម្រាប់ការគ្រប់គ្រងរដ្ឋជាសកល។ វានាំទៅដល់ប្លក់មួយចំនួនលើប្រធានបទ៖

• អ្នកមិនគួរប្រើ Redux សម្រាប់កម្មវិធី React របស់អ្នកទេ ។
• ហេតុអ្វីបានជាអ្នកមិនត្រូវការ Redux ទៀតទេ?

ទោះបីជាមានការរុញច្រានពីសហគមន៍ក៏ដោយ ក៏ react-redux ដែលជាបណ្ណាល័យដែលប្រើដើម្បីចង redux ទៅនឹងសមាសធាតុ reactjs មានការ អនុម័តរបស់វាកើនឡើងក្នុងរយៈពេល 5 ឆ្នាំចុងក្រោយនេះ យោងទៅតាមនិន្នាការ npm ។ នៅថ្ងៃទី 01 ខែកុម្ភៈ ឆ្នាំ 2025 ការទាញយកដែលបង្ហាញក្នុង npm សម្រាប់ redux គឺ 6,752,764។

ប្រសិនបើអ្នកឆ្ងល់ថាតើអ្វីជាជម្រើសជំនួសនោះ ចម្លើយគឺបរិបទ reactjs និងភ្ជាប់ជាមួយសំណួរ។

សម្រាប់កម្មវិធីដែលពឹងផ្អែកលើកញ្ចប់ redux វាជាបញ្ហាប្រឈមនៅក្នុងខ្លួនវាក្នុងការគេចចេញពីវា។ ស្ថានភាពសកលគឺជាភាពអាស្រ័យមួយដែលកាត់បន្ថយការសាកល្បងនៃកម្មវិធី។ តាមបទពិសោធន៍របស់ខ្ញុំ បរិបទសកលដែលត្រូវការច្រើនតែកើតឡើងជាមួយនឹងភាពស្មុគស្មាញនៃចំណេះដឹងដែន។ ខណៈពេលដែលអ្នកប្រហែលជាចង់សាកល្បងតែសមាសធាតុជាក់លាក់មួយ ឬផ្នែកនៃកម្មវិធីរបស់អ្នក អ្នកនឹងមិនអាចធ្វើដោយគ្មានការចែករំលែកភាពអាស្រ័យជាសកលដែលផ្នែកនេះទាមទារនោះទេ។

គុណសម្បត្តិ

ការទទួលយក reactjs សម្រាប់កម្មវិធីសហគ្រាស នៅពេលសរសេរអត្ថបទនេះ គឺជាការសម្រេចចិត្តដ៏ត្រឹមត្រូវមួយសម្រាប់ការថែរក្សា (ទោះបីជាមានពេលដ៏សំខាន់ដែល Facebook មាននៅពេលដែលវាបានផ្លាស់ប្តូរគំរូអាជ្ញាប័ណ្ណបណ្ណាល័យក៏ដោយ)។ ReactJs ផ្តល់នូវភាពឆបគ្នាថយក្រោយសម្រាប់ APIs ដែលលែងត្រូវបានប្រើប្រាស់ ដែលធ្វើអោយការអនុម័តរយៈពេលវែងមួយនៃគុណសម្បត្តិសំខាន់ៗ។

បរិបទ

ដូចជាប្រសិនបើសមាសធាតុមិនគ្រប់គ្រាន់ជាគោលគំនិតអរូបីដើម្បីចូលទៅជុំវិញនោះ បរិបទក៏ជាគុណសម្បត្តិមួយដែល reactjs ផ្តល់ឱ្យទាក់ទងនឹងការធ្វើតេស្ត។ ខ្ញុំ​និយាយ​លម្អិត​បន្ថែម​ទៀត​អំពី​ប្រធានបទ​នេះ​នៅ​ក្នុង ​ការ​បង្ហោះ​ប្លុក​ដែល​ឧទ្ទិស​ដល់​ការ​សាកល្បង​បរិបទ reactjs ។ កម្រិតនៃការវេចខ្ចប់ដែលបរិបទ reactjs ផ្តល់គឺជាអត្ថប្រយោជន៍ដ៏សំខាន់មួយសម្រាប់ការធ្វើតេស្តឡើងវិញ និងការបើកដំណើរការឡើងវិញនៅក្នុងមូលដ្ឋានកូដ reactjs ។

ដោយសារការរលាយនៃសមាសធាតុ និងតក្កវិជ្ជាអាជីវកម្មគឺជាបញ្ហាប្រឈមមួយ បរិបទគឺជាឧបករណ៍ដែលអនុញ្ញាតឱ្យមានការរៀបចំរចនាសម្ព័ន្ធកូដឡើងវិញកាន់តែប្រសើរ។ នៅក្នុងផ្នែក testability នៃវត្ថុ នេះក៏ជាគុណសម្បត្តិមួយផងដែរព្រោះវាជាយន្តការដែលអនុញ្ញាតឱ្យកាត់បន្ថយចំនួននៃ test-double ដែលត្រូវបានប្រើប្រាស់ ដូច្នេះនាំទៅរកកូដដែលអាចសាកល្បងបានកាន់តែច្រើន។

ការធ្វើតេស្តកែទម្រង់ឡើងវិញ

ដោយទទួលបានបញ្ជីបែបនេះរហូតមកដល់ពេលនេះ ផ្នែកសាកល្បងសង្ឃឹមថានឹងមានភាពច្បាស់លាស់ដែលអាស្រ័យលើរបៀបដែលកូដប្រភពត្រូវបានរៀបចំ និងរបៀបដែលព្រំដែននៃកម្មវិធីត្រូវបានរៀបចំ។ ទោះយ៉ាងណាក៏ដោយ កូដសាកល្បងច្រើនអាស្រ័យលើកូដផលិត ការធ្វើតេស្តពីរដងអាចត្រូវបានប្រើដើម្បីជួយកំណត់វិសាលភាព។ ដំណើរការគិតសម្រាប់ការធ្វើតេស្តកែទម្រង់ឡើងវិញត្រូវបានផ្សំឡើងដោយជំហានសាមញ្ញមួយចំនួន។

1. សរសេរករណីសាកល្បងសាមញ្ញសម្រាប់មុខងារដែលចង់បាន។
2. ដំណើរការករណីសាកល្បង ហើយឃើញថាវាបរាជ័យ។

២.១. តើ​ការ​ប្រឡង​បាន​ឆ្លង​ផុត​ទេ?

 2.1.1 - Yes → Check if the feedback is correct 2.1.2 - No → Provide the dependency without questioning

3. ត្រលប់ទៅ 1 ។

ចំណាំថា: វិធីសាស្រ្តដែលបានពិពណ៌នានៅទីនេះគឺស្រដៀងគ្នាទៅនឹងអ្វីដែលត្រូវបានពិពណ៌នាថាជាការធ្វើតេស្តលក្ខណៈដែលបានពិពណ៌នាដោយ Michael Feathers នៅក្នុង

ធ្វើការប្រកបដោយប្រសិទ្ធភាពជាមួយសៀវភៅ Legacy Code ។

ការមកដល់នៃ LLMs ក៏អាចផ្តល់នូវការយល់ដឹងខណៈពេលដែលការសរសេរការធ្វើតេស្តដំបូង និងការកែលម្អមូលដ្ឋានកូដឡើងវិញដោយមិនចាំបាច់មានការធ្វើតេស្តណាមួយឡើយ។ ជំហាននីមួយៗក្នុងយុទ្ធសាស្ត្រនេះគឺមានន័យដដែលៗ។ វាអាចរួមបញ្ចូលគ្នានូវរចនាប័ទ្មផ្សេងៗនៃ TDD ផងដែរ។ វិធីសាស្រ្តដែលបានស្នើឡើងគឺមិនមែនដើម្បីបញ្ឈប់ការធ្វើអ្វីៗគ្រប់យ៉ាង និងជួសជុលឡើងវិញនូវករណីសាកល្បងដែលអាចកើតមាន និងបញ្ហាដែលអាចកើតមានទាំងអស់ដែលមូលដ្ឋានកូដមាននោះទេ វាគឺជាល្បែងផ្គុំរូប។ មុខងារនីមួយៗដែលបានសាកល្បងគឺជាបំណែកដែលសមនឹងរូបផ្គុំ។

វិធីសាស្រ្តដូចគ្នាត្រូវបានស្នើសម្រាប់ refactoring ។ អ្នកអភិវឌ្ឍន៍គួរតែអាច refactor ជានិច្ចនូវបំណែកនៃកូដ។ វា​មិន​មែន​ជា​គម្រោង​ផ្សេង​គ្នា​ទេ ហើយ​វា​មិន​មែន​មាន​គោល​បំណង​ដើម្បី​តែ​ឧទ្ទិស​ដល់​វា​នោះ​ទេ។ គោលដៅចម្បងរបស់វាគឺដើម្បីធ្វើឱ្យមូលដ្ឋានកូដប្រសើរជាងមុន។ ម្តងហើយម្តងទៀត។ មានទិដ្ឋភាពមួយចំនួនដែលអាចត្រូវបានប្រើសម្រាប់ការធ្វើតេស្តឡើងវិញនៅក្នុងមូលដ្ឋានកូដដែលមិនមាន៖

• ជួសជុលកំហុស - នេះគឺជាឱកាសដើម្បីលាតត្រដាងកូដ និងយល់ពីរបៀបដែលវាមានឥរិយាបទ។ ការជួសជុលកំហុសគឺជាផ្នែកមួយនៃបញ្ហា ទោះបីជាយ៉ាងណាក៏ដោយ នេះក៏ជាឱកាសមួយដើម្បីកំណត់លក្ខណៈកម្មវិធីដែលមាននៅក្នុងដៃផងដែរ។
• ការអនុវត្តមុខងារថ្មី - នេះគឺដូចគ្នានឹងការជួសជុលកំហុសដែរ ទោះជាយ៉ាងណាក៏ដោយ វិធីសាស្រ្តដែលបានធ្វើឡើងផ្លាស់ប្តូរបន្តិច។ វា​គឺ​ជា​វិធីសាស្ត្រ​ដូច​នឹង​ការ​ស្នើ​ដោយ​លោក Kent Beck៖ "ធ្វើ​ឱ្យ​ការ​ផ្លាស់​ប្តូរ​ងាយ​ស្រួល បន្ទាប់​មក​ធ្វើ​ការ​ផ្លាស់​ប្តូរ​ដ៏​ងាយ"។ មុខងារថ្មីគឺជាកន្លែងដែលបង្ហាញមូលដ្ឋានកូដសម្រាប់ធ្វើការផ្លាស់ប្តូរ មុនពេលណែនាំមុខងារថ្មី។

ចំណុចសំខាន់នៃវិធីសាស្រ្តនេះគឺដំណើរការសិក្សា។ រាល់ជំហាននៃការរៀនមូលដ្ឋានកូដត្រូវយកមកពិចារណា។

អិលអិលអេម

Copilot អាច​ត្រូវ​បាន​ប្រើ​ដើម្បី​ធ្វើ​ឱ្យ​ស្វ័យប្រវត្តិ​នូវ​ការ​ធ្វើ​តេស្ត​រុករក​ដំបូង​ដែល​បាន​ពិពណ៌នា​នៅ​ក្នុង​ផ្នែក​មុន​។ អនុវត្តតាមច្បាប់ចំនួនបី វាអាចចាប់ផ្តើមជាមួយនឹងការកំណត់អត្តសញ្ញាណភាពអាស្រ័យ និងការសរសេរសំណុំនៃការធ្វើតេស្តដ៏ទូលំទូលាយមួយដែលត្រូវប្រើជាមូលដ្ឋាន។

ចូរយើងយក Testable ជាឧទាហរណ៍មួយ; វាគឺជាកម្មវិធីមួយដែលត្រូវបានសរសេរកាលពីជាងប្រាំឆ្នាំមុននៅក្នុង reactjs និងប្រើអង់ស៊ីមសម្រាប់ការធ្វើតេស្ត។ សម្រាប់ស្តង់ដារថ្ងៃនេះ បណ្ណាល័យដែលបានកាន់កាប់គឺ vitest ឬ jest រួមជាមួយបណ្ណាល័យសាកល្បង។ ដើម្បីធ្វើឱ្យករណីសាកល្បងឡើងវិញសម្រាប់ការសាកល្បង និងទាញយកអត្ថប្រយោជន៍ពី LLMs យើងអាចប្រើ copilot ដើម្បីជួយយើងជាមួយនឹងការលើកធ្ងន់។

Testable ត្រូវបានផ្សំឡើងដោយបទពិសោធន៍លេងល្បែងដែលមានស្ថានភាព កម្រិត និងវឌ្ឍនភាពអ្នកប្រើប្រាស់តាមរយៈបញ្ហាប្រឈមផ្សេងៗគ្នា។ សមាសភាគដែលបានពិពណ៌នានៅក្នុងរូបភាពខាងក្រោមគឺជាសមាសភាគដែលត្រូវបានប្រើដើម្បីបង្ហាញប្រអប់ និងដើម្បីឆ្ពោះទៅមុខក្នុងប្រវត្តិនៃបទពិសោធន៍។ ដោយប្រើ Copilot សម្រាប់ vscode ខ្ញុំបានស្នើឱ្យវាសរសេរការសាកល្បងជាមួយនឹងកូដផលិតកម្មដែលយើងចាប់អារម្មណ៍៖

នៅពេលដែលវាផ្ទុកសំណួរ និងវិភាគកូដ វាផ្តល់ចម្លើយ។

រួមជាមួយនឹងចម្លើយ Copilot បានកត់សម្គាល់ថាខ្ញុំមិនទាន់ប្រើបណ្ណាល័យសាកល្បងទេ ហើយវាស្នើឱ្យខ្ញុំធ្វើវា ហើយបន្ទាប់ពីនោះ ករណីសាកល្បងដែលបានបង្កើតត្រូវបានបង្ហាញ។ ការដំណើរការករណីសាកល្បងដូចដែលវាបានបង្ហាញធ្វើឱ្យការធ្វើតេស្តមិនឆ្លងកាត់ ហើយសម្គាល់វាជាពណ៌ក្រហម។

ចំណុចនេះមានសារៈសំខាន់ព្រោះវាបង្ហាញថាការដំឡើងបន្ថែមចាំបាច់ត្រូវយកមកពិចារណា ហើយ Copilot មិនអាចដោះស្រាយវាបានទេ។ ពួកគេមានដូចខាងក្រោម:

• ការនាំចូលមិនត្រឹមត្រូវ; វាត្រូវការការជួសជុលដើម្បីចង្អុលទៅឯកសារត្រឹមត្រូវ។
• ការរៀបចំសម្រាប់មាតិកាមិនត្រឹមត្រូវ; ឯកសារមិនអាចធ្វើឲ្យខ្លឹមសារត្រឹមត្រូវសម្រាប់ករណីសាកល្បងបានទេ។

លំហូរដែលបានពិពណ៌នាពីមុននៅក្នុងផ្នែកនេះត្រូវបានអនុវត្តនៅទីនេះផងដែរ។ រង្វិលជុំមតិត្រឡប់ឥឡូវនេះគឺដើម្បីចាប់ផ្តើមដោះស្រាយបញ្ហាទាំងនោះ ហើយដំណើរការការធ្វើតេស្តរហូតដល់វដ្ត TDD ត្រូវបានបញ្ចប់។

ធនធាន

• តេស្តលក្ខណៈ