React Apps ਦੀ Testing ਅਤੇ Debugging

ਇਹ ਅੰਦਾਜ਼ਾ ਲਗਾਉਣਾ ਬੰਦ ਕਰੋ ਕਿ ਤੁਹਾਡਾ ਕੋਡ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ ਜਾਂ ਨਹੀਂ। ਭਰੋਸਾ ਬਣਾਉਣ ਲਈ testing ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਜ਼ਿਆਦਾਤਰ ਡਿਵੈਲਪਰ testing ਨੂੰ ਛੱਡ ਦਿੰਦੇ ਹਨ ਕਿਉਂਕਿ ਉਹਨਾਂ ਨੂੰ setup ਬਹੁਤ ਮੁਸ਼ਕਲ ਲੱਗਦਾ ਹੈ। ਉਹ testing ਨੂੰ ਇੱਕ ਸੁਰੱਖਿਆ ਜਾਲ (safety net) ਦੀ ਬਜਾਏ ਇੱਕ ਬੋਝ ਸਮਝਦੇ ਹਨ।

ਤੁਸੀਂ ਕੰਪਿਊਟਰ ਲਈ tests ਨਹੀਂ ਲਿਖਦੇ। ਤੁਸੀਂ ਆਪਣੇ ਆਉਣ ਵਾਲੇ ਕੱਲ੍ਹ (future self) ਲਈ tests ਲਿਖਦੇ ਹੋ। ਜਦੋਂ ਤੁਸੀਂ ਰਾਤ ਦੇ 2 ਵਜੇ ਕੋਈ function ਬਦਲਦੇ ਹੋ, ਤਾਂ tests ਤੁਹਾਨੂੰ ਤੁਰੰਤ ਦੱਸ ਦਿੰਦੇ ਹਨ ਕਿ ਤੁਸੀਂ ਕੁਝ ਗਲਤ ਤਾਂ ਨਹੀਂ ਕਰ ਦਿੱਤਾ।

Testing ਨੂੰ ਇੱਕ ਪਿਰਾਮਿਡ ਵਾਂਗ ਸਮਝੋ:

• Unit Tests: ਇੱਕ function ਜਾਂ component ਦੀ testing ਕਰੋ। ਇਹ ਤੇਜ਼ ਅਤੇ ਵੱਡੀ ਗਿਣਤੀ ਵਿੱਚ ਹੁੰਦੇ ਹਨ। • Integration Tests: ਇਹ ਦੇਖੋ ਕਿ ਵੱਖ-ਵੱਖ ਹਿੱਸੇ ਮਿਲ ਕੇ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ। ਇਹ ਤੁਹਾਨੂੰ ਉੱਚ ਪੱਧਰੀ ਭਰੋਸਾ ਦਿੰਦੇ ਹਨ। • E2E Tests: browser ਵਿੱਚ ਪੂਰੀ app ਦੀ testing ਕਰੋ। ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਸਿਰਫ਼ login ਜਾਂ checkout ਵਰਗੇ ਮਹੱਤਵਪੂਰਨ ਰਸਤਿਆਂ (critical paths) ਲਈ ਕਰੋ।

React Testing Library ਦਾ ਸੁਨਹਿਰੀ ਨਿਯਮ: ਉਹ ਚੀਜ਼ test ਕਰੋ ਜੋ ਯੂਜ਼ਰ ਦੇਖਦਾ ਹੈ।

State variables ਨੂੰ test ਨਾ ਕਰੋ। CSS classes ਨੂੰ test ਨਾ ਕਰੋ। Internal logic ਨੂੰ test ਨਾ ਕਰੋ। Buttons, text, ਅਤੇ inputs ਨੂੰ test ਕਰੋ। ਜੇਕਰ ਯੂਜ਼ਰ ਇਸਨੂੰ ਨਹੀਂ ਦੇਖ ਸਕਦਾ, ਤਾਂ ਇਸਨੂੰ test ਨਾ ਕਰੋ।

Arrange, Act, Assert ਪੈਟਰਨ ਦੀ ਪਾਲਣਾ ਕਰੋ:

API calls ਵਰਗੇ async code ਲਈ, waitFor ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਤੁਹਾਡੇ test ਨੂੰ ਨਤੀਜਾ ਚੈੱਕ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ data load ਹੋਣ ਦੀ ਉਡੀਕ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

ਜੇਕਰ ਤੁਹਾਡੀ app production ਵਿੱਚ crash ਹੋ ਜਾਂਦੀ ਹੈ, ਤਾਂ Error Boundaries ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਇੱਕ ਖਰਾਬ component ਨੂੰ ਤੁਹਾਡੇ ਪੂਰੇ ਪੇਜ ਨੂੰ ਚਿੱਟੀ ਸਕ੍ਰੀਨ (white screen) ਵਿੱਚ ਬਦਲਣ ਤੋਂ ਰੋਕਦੇ ਹਨ। ਇਹ ਤੁਹਾਡੇ ਯੂਜ਼ਰਾਂ ਲਈ ਇੱਕ ਸੁਚੱਜਾ ਬਦਲ (graceful fallback) ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।

ਤੇਜ਼ debugging checklist:

ਉਹਨਾਂ ਚੀਜ਼ਾਂ ਦੀ testing 'ਤੇ ਧਿਆਨ ਦਿਓ ਜੋ ਮਹੱਤਵਪੂਰਨ ਹਨ। ਤੁਹਾਨੂੰ 100% coverage ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਤੁਹਾਨੂੰ ਉਹਨਾਂ features ਨੂੰ cover ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਜਿਨ੍ਹਾਂ ਦੇ ਫੇਲ ਹੋਣ 'ਤੇ ਨੁਕਸਾਨ ਹੋ ਸਕਦਾ ਹੈ।

Source: https://dev.to/kushang_tailor/testing-debugging-react-apps-write-code-you-can-actually-trust-5334