રિએક્ટ કમ્પોનન્ટ પરીક્ષણ: આઇસોલેટેડ યુનિટ ટેસ્ટિંગ માટે એક વ્યાપક માર્ગદર્શિકા

આધુનિક વેબ ડેવલપમેન્ટની દુનિયામાં, મજબૂત અને જાળવવા યોગ્ય એપ્લિકેશનો બનાવવી સર્વોપરી છે. રિએક્ટ, યુઝર ઇન્ટરફેસ બનાવવા માટે એક અગ્રણી જાવાસ્ક્રિપ્ટ લાઇબ્રેરી છે, જે વિકાસકર્તાઓને ગતિશીલ અને ઇન્ટરેક્ટિવ વેબ અનુભવો બનાવવા માટે સશક્ત બનાવે છે. જો કે, રિએક્ટ એપ્લિકેશનોની જટિલતા કોડની ગુણવત્તા સુનિશ્ચિત કરવા અને રિગ્રેશન્સને રોકવા માટે એક વ્યાપક પરીક્ષણ વ્યૂહરચનાની જરૂર છે. આ માર્ગદર્શિકા રિએક્ટ પરીક્ષણના એક નિર્ણાયક પાસા પર ધ્યાન કેન્દ્રિત કરે છે: આઇસોલેટેડ યુનિટ પરીક્ષણ.

આઇસોલેટેડ યુનિટ પરીક્ષણ શું છે?

આઇસોલેટેડ યુનિટ પરીક્ષણ એ એક સોફ્ટવેર પરીક્ષણ તકનીક છે જ્યાં એપ્લિકેશનના વ્યક્તિગત એકમો અથવા ઘટકોને સિસ્ટમના અન્ય ભાગોથી અલગ કરીને પરીક્ષણ કરવામાં આવે છે. રિએક્ટના સંદર્ભમાં, આનો અર્થ એ છે કે ચાઇલ્ડ કમ્પોનન્ટ, બાહ્ય API અથવા રેડક્સ સ્ટોર જેવી તેમની અવલંબન પર આધાર રાખ્યા વિના વ્યક્તિગત રિએક્ટ કમ્પોનન્ટનું પરીક્ષણ કરવું. મુખ્ય ધ્યેય એ ચકાસવાનું છે કે દરેક ઘટક યોગ્ય રીતે કાર્ય કરે છે અને જ્યારે ચોક્કસ ઇનપુટ્સ આપવામાં આવે છે, ત્યારે બાહ્ય પરિબળોના પ્રભાવ વિના અપેક્ષિત આઉટપુટ ઉત્પન્ન કરે છે.

શા માટે અલગતા મહત્વપૂર્ણ છે?

પરીક્ષણ દરમિયાન ઘટકોને અલગ કરવાથી ઘણા મુખ્ય ફાયદા થાય છે:

• ઝડપી પરીક્ષણ અમલ: આઇસોલેટેડ પરીક્ષણો ખૂબ ઝડપથી અમલ કરે છે કારણ કે તેમાં જટિલ સેટઅપ અથવા બાહ્ય અવલંબન સાથેની ક્રિયાપ્રતિક્રિયા શામેલ નથી. આ વિકાસ ચક્રને વેગ આપે છે અને વધુ વારંવાર પરીક્ષણ માટે પરવાનગી આપે છે.
• કેન્દ્રિત ભૂલ શોધ: જ્યારે કોઈ પરીક્ષણ નિષ્ફળ થાય છે, ત્યારે તેનું કારણ તાત્કાલિક સ્પષ્ટ થાય છે કારણ કે પરીક્ષણ એક જ ઘટક અને તેના આંતરિક તર્ક પર ધ્યાન કેન્દ્રિત કરે છે. આ ડિબગીંગને સરળ બનાવે છે અને ભૂલોને ઓળખવા અને સુધારવા માટે જરૂરી સમય ઘટાડે છે.
• ઘટાડેલી અવલંબન: આઇસોલેટેડ પરીક્ષણો એપ્લિકેશનના અન્ય ભાગોમાં થતા ફેરફારો માટે ઓછા સંવેદનશીલ હોય છે. આ પરીક્ષણોને વધુ સ્થિતિસ્થાપક બનાવે છે અને ખોટા સકારાત્મક અથવા નકારાત્મકનું જોખમ ઘટાડે છે.
• સુધારેલ કોડ ડિઝાઇન: આઇસોલેટેડ પરીક્ષણો લખવાથી વિકાસકર્તાઓને સ્પષ્ટ જવાબદારીઓ અને સારી રીતે વ્યાખ્યાયિત ઇન્ટરફેસ સાથે ઘટકો ડિઝાઇન કરવા પ્રોત્સાહિત કરવામાં આવે છે. આ મોડ્યુલારિટીને પ્રોત્સાહન આપે છે અને એપ્લિકેશનના એકંદર આર્કિટેક્ચરમાં સુધારો કરે છે.
• વધારેલ પરીક્ષણક્ષમતા: ઘટકોને અલગ કરીને, વિકાસકર્તાઓ સરળતાથી અવલંબનનું મોક અથવા સ્ટબ કરી શકે છે, જે તેમને વિવિધ દૃશ્યો અને ધારની સ્થિતિનું અનુકરણ કરવાની મંજૂરી આપે છે જે વાસ્તવિક દુનિયાના વાતાવરણમાં પુનઃઉત્પાદન કરવું મુશ્કેલ હોઈ શકે છે.

રિએક્ટ યુનિટ ટેસ્ટિંગ માટેના સાધનો અને લાઇબ્રેરીઓ

રિએક્ટ યુનિટ ટેસ્ટિંગને સરળ બનાવવા માટે ઘણા શક્તિશાળી સાધનો અને લાઇબ્રેરીઓ ઉપલબ્ધ છે. અહીં કેટલાક સૌથી લોકપ્રિય વિકલ્પો છે:

• જેસ્ટ: જેસ્ટ એ ફેસબુક (હવે મેટા) દ્વારા વિકસાવવામાં આવેલું એક જાવાસ્ક્રિપ્ટ પરીક્ષણ માળખું છે, જે ખાસ કરીને રિએક્ટ એપ્લિકેશન્સના પરીક્ષણ માટે રચાયેલ છે. તે મોકિંગ, એસર્શન લાઇબ્રેરીઓ અને કોડ કવરેજ વિશ્લેષણ સહિત સુવિધાઓનો વ્યાપક સમૂહ પૂરો પાડે છે. જેસ્ટ તેની ઉપયોગમાં સરળતા અને ઉત્તમ પ્રદર્શન માટે જાણીતું છે.
• રિએક્ટ ટેસ્ટિંગ લાઇબ્રેરી: રિએક્ટ ટેસ્ટિંગ લાઇબ્રેરી એ એક હળવા વજનની પરીક્ષણ લાઇબ્રેરી છે જે વપરાશકર્તાના દૃષ્ટિકોણથી ઘટકોનું પરીક્ષણ કરવા પ્રોત્સાહિત કરે છે. તે વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાઓનું અનુકરણ કરવાની રીતે ઘટકો સાથે ક્વેરીંગ અને ક્રિયાપ્રતિક્રિયા કરવા માટે ઉપયોગિતા કાર્યોનો સમૂહ પૂરો પાડે છે. આ અભિગમ વપરાશકર્તાના અનુભવ સાથે વધુ નજીકથી સંરેખિત પરીક્ષણો લખવાનું પ્રોત્સાહન આપે છે.
• એન્ઝાઇમ: એન્ઝાઇમ એ એરબીએનબી દ્વારા વિકસાવવામાં આવેલું રિએક્ટ માટેનું જાવાસ્ક્રિપ્ટ પરીક્ષણ ઉપયોગિતા છે. તે રિએક્ટ ઘટકોને રેન્ડર કરવા અને તેમના આંતરિક ભાગો સાથે ક્રિયાપ્રતિક્રિયા કરવા માટેના કાર્યોનો સમૂહ પૂરો પાડે છે, જેમ કે પ્રોપ્સ, સ્થિતિ અને જીવનચક્ર પદ્ધતિઓ. હજી પણ ઘણા પ્રોજેક્ટ્સમાં ઉપયોગમાં લેવાય છે, રિએક્ટ ટેસ્ટિંગ લાઇબ્રેરી સામાન્ય રીતે નવા પ્રોજેક્ટ્સ માટે પસંદ કરવામાં આવે છે.
• મોચા: મોચા એ એક લવચીક જાવાસ્ક્રિપ્ટ પરીક્ષણ માળખું છે જેનો ઉપયોગ વિવિધ એસર્શન લાઇબ્રેરીઓ અને મોકિંગ માળખાં સાથે થઈ શકે છે. તે સ્વચ્છ અને કસ્ટમાઇઝ કરી શકાય તેવું પરીક્ષણ વાતાવરણ પૂરું પાડે છે.
• ચાય: ચાય એ એક લોકપ્રિય એસર્શન લાઇબ્રેરી છે જેનો ઉપયોગ મોચા અથવા અન્ય પરીક્ષણ માળખાં સાથે થઈ શકે છે. તે અપેક્ષા, જોઈએ અને ખાતરી સહિત એસર્શન શૈલીઓનો સમૃદ્ધ સમૂહ પૂરો પાડે છે.
• સિનોન.જેએસ: સિનોન.જેએસ એ જાવાસ્ક્રિપ્ટ માટે સ્વતંત્ર પરીક્ષણ જાસૂસો, સ્ટબ્સ અને મોક્સ છે. તે કોઈપણ યુનિટ પરીક્ષણ માળખા સાથે કામ કરે છે.

મોટાભાગના આધુનિક રિએક્ટ પ્રોજેક્ટ્સ માટે, ભલામણ કરેલ સંયોજન જેસ્ટ અને રિએક્ટ ટેસ્ટિંગ લાઇબ્રેરી છે. આ સંયોજન એક શક્તિશાળી અને સાહજિક પરીક્ષણ અનુભવ પૂરો પાડે છે જે રિએક્ટ પરીક્ષણ માટેની શ્રેષ્ઠ પ્રથાઓ સાથે સારી રીતે સંરેખિત થાય છે.

તમારા પરીક્ષણ વાતાવરણને સેટઅપ કરવું

તમે યુનિટ પરીક્ષણો લખવાનું શરૂ કરી શકો તે પહેલાં, તમારે તમારા પરીક્ષણ વાતાવરણને સેટઅપ કરવાની જરૂર છે. જેસ્ટ અને રિએક્ટ ટેસ્ટિંગ લાઇબ્રેરીને સેટઅપ કરવા માટે અહીં એક પગલું-દર-પગલાની માર્ગદર્શિકા છે:

1. અવલંબન સ્થાપિત કરો:

               npm install --save-dev jest @testing-library/react @testing-library/jest-dom babel-jest @babel/preset-env @babel/preset-react
               
   
                 
                   Copy
                 
               
             

   • જેસ્ટ: જેસ્ટ પરીક્ષણ માળખું.
   • @testing-library/react: ઘટકો સાથે ક્રિયાપ્રતિક્રિયા કરવા માટે રિએક્ટ ટેસ્ટિંગ લાઇબ્રેરી.
   • @testing-library/jest-dom: DOM સાથે કામ કરવા માટે કસ્ટમ જેસ્ટ મેચર્સ પૂરા પાડે છે.
   • babel-jest: જેસ્ટ માટે જાવાસ્ક્રિપ્ટ કોડનું રૂપાંતરણ કરે છે.
   • @babel/preset-env: એક સ્માર્ટ પ્રીસેટ જે તમને નવીનતમ જાવાસ્ક્રિપ્ટનો ઉપયોગ કરવાની મંજૂરી આપે છે, તમારે કયા સિન્ટેક્સ ટ્રાન્સફોર્મ્સ (અને વૈકલ્પિક રીતે, બ્રાઉઝર પોલીફિલ્સ) ની જરૂર છે તેનું સંચાલન કરવાની જરૂર નથી.
   • @babel/preset-react: બધા રિએક્ટ પ્લગઇન્સ માટે બેબલ પ્રીસેટ.
2. બેબલને ગોઠવો (babel.config.js):

               module.exports = {
     presets: [
       ['@babel/preset-env', {targets: {node: 'current'}}],
       '@babel/preset-react',
     ],
   };
   
               
   
                 
                   Copy
                 
               
             

3. જેસ્ટને ગોઠવો (jest.config.js):

               module.exports = {
     testEnvironment: 'jsdom',
     setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
     moduleNameMapper: {
       '\.(css|less|scss)$': 'identity-obj-proxy',
     },
   };
   
               
   
                 
                   Copy
                 
               
             

   • testEnvironment: 'jsdom': પરીક્ષણ વાતાવરણને બ્રાઉઝર જેવા વાતાવરણ તરીકે સ્પષ્ટ કરે છે.
   • setupFilesAfterEnv: ['<rootDir>/src/setupTests.js']: પરીક્ષણ વાતાવરણ સેટઅપ થયા પછી ચલાવવા માટે એક ફાઇલ સ્પષ્ટ કરે છે. આનો ઉપયોગ સામાન્ય રીતે જેસ્ટને ગોઠવવા અને કસ્ટમ મેચર્સ ઉમેરવા માટે થાય છે.
   • moduleNameMapper: CSS/SCSS આયાતને તેમની નકલ કરીને સંભાળે છે. આ તમારા ઘટકોમાં સ્ટાઇલશીટ્સ આયાત કરતી વખતે સમસ્યાઓ અટકાવે છે. `identity-obj-proxy` એક ઑબ્જેક્ટ બનાવે છે જ્યાં દરેક કી સ્ટાઇલ માં વપરાયેલ વર્ગના નામ અને મૂલ્ય પોતે જ વર્ગનું નામ છે.
4. setupTests.js બનાવો (src/setupTests.js):

               import '@testing-library/jest-dom/extend-expect';
               
   
                 
                   Copy
                 
               
             

   આ ફાઇલ `@testing-library/jest-dom` માંથી કસ્ટમ મેચર્સ સાથે જેસ્ટને વિસ્તૃત કરે છે, જેમ કે `toBeInTheDocument`.

5. package.json અપડેટ કરો:

               "scripts": {
     "test": "jest",
     "test:watch": "jest --watchAll"
   }
               
   
                 
                   Copy
                 
               
             

   `package.json` માં પરીક્ષણો ચલાવવા અને ફેરફારો માટે જોવાની સ્ક્રિપ્ટો ઉમેરો.

તમારું પ્રથમ આઇસોલેટેડ યુનિટ પરીક્ષણ લખવું

ચાલો એક સરળ રિએક્ટ ઘટક બનાવીએ અને તેના માટે આઇસોલેટેડ યુનિટ પરીક્ષણ લખીએ.

ઉદાહરણ ઘટક (src/components/Greeting.js):

            import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name || 'World'}!</h1>;
}

export default Greeting;
            

              
                Copy
              
            
          

પરીક્ષણ ફાઇલ (src/components/Greeting.test.js):

            import React from 'react';
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

describe('Greeting Component', () => {
  it('renders the greeting with the provided name', () => {
    render(<Greeting name="John" />);
    const greetingElement = screen.getByText('Hello, John!');
    expect(greetingElement).toBeInTheDocument();
  });

  it('renders the greeting with the default name when no name is provided', () => {
    render(<Greeting />);
    const greetingElement = screen.getByText('Hello, World!');
    expect(greetingElement).toBeInTheDocument();
  });
});
            

              
                Copy
              
            
          

સ્પષ્ટીકરણ:

• `describe` બ્લોક: સંબંધિત પરીક્ષણોને એકસાથે જૂથબદ્ધ કરે છે.
• `it` બ્લોક: વ્યક્તિગત પરીક્ષણ કેસને વ્યાખ્યાયિત કરે છે.
• `render` કાર્ય: ઘટકને DOM માં રેન્ડર કરે છે.
• `screen.getByText` કાર્ય: નિર્દિષ્ટ ટેક્સ્ટવાળા તત્વ માટે DOM ને ક્વેરી કરે છે.
• `expect` કાર્ય: ઘટકના આઉટપુટ વિશે એક એસર્શન બનાવે છે.
• `toBeInTheDocument` મેચર: તપાસે છે કે તત્વ DOM માં હાજર છે કે નહીં.

પરીક્ષણો ચલાવવા માટે, તમારા ટર્મિનલમાં નીચેનો આદેશ ચલાવો:

            npm test
            

              
                Copy
              
            
          

અવલંબનનું મોકિંગ

આઇસોલેટેડ યુનિટ પરીક્ષણમાં, પરીક્ષણ પરિણામોને બાહ્ય પરિબળોને પ્રભાવિત કરતા અટકાવવા માટે અવલંબનનું મોક કરવું ઘણીવાર જરૂરી છે. મોકિંગમાં વાસ્તવિક અવલંબનને સરળ સંસ્કરણો સાથે બદલવાનો સમાવેશ થાય છે જે પરીક્ષણ દરમિયાન નિયંત્રિત અને તેમાં ફેરફાર કરી શકાય છે.

ઉદાહરણ: એક કાર્યનું મોકિંગ

ધારો કે અમારી પાસે એક એવું ઘટક છે જે API માંથી ડેટા મેળવે છે:

ઘટક (src/components/DataFetcher.js):

            import React, { useState, useEffect } from 'react';

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function loadData() {
      const fetchedData = await fetchData();
      setData(fetchedData);
    }

    loadData();
  }, []);

  if (!data) {
    return <p>Loading...</p>;
  }

  return <div><h2>Data:</h2><pre>{JSON.stringify(data, null, 2)}</pre></div>;
}

export default DataFetcher;
            

              
                Copy
              
            
          

પરીક્ષણ ફાઇલ (src/components/DataFetcher.test.js):

            import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import DataFetcher from './DataFetcher';

// Mock the fetchData function
const mockFetchData = jest.fn();

// Mock the module that contains the fetchData function
jest.mock('./DataFetcher', () => ({
  __esModule: true,
  default: function MockedDataFetcher() {
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      async function loadData() {
        const fetchedData = await mockFetchData();
        setData(fetchedData);
      }
      loadData();
    }, []);

    if (!data) {
      return <p>Loading...</p>;
    }

    return <div><h2>Data:</h2><pre>{JSON.stringify(data, null, 2)}</pre></div>;
  },
}));

describe('DataFetcher Component', () => {
  it('renders the data fetched from the API', async () => {
    // Set the mock implementation
    mockFetchData.mockResolvedValue({ name: 'Test Data' });

    render(<DataFetcher />);

    // Wait for the data to load
    await waitFor(() => screen.getByText('Data:'));

    // Assert that the data is rendered correctly
    expect(screen.getByText('{"name":"Test Data"}')).toBeInTheDocument();
  });
});
            

              
                Copy
              
            
          

સ્પષ્ટીકરણ:

• `jest.mock('./DataFetcher', ...)`: આખા `DataFetcher` ઘટકની નકલ કરે છે, તેની મૂળ અમલીકરણને મોક કરેલા સંસ્કરણ સાથે બદલીને. આ અભિગમ ઘટકની અંદર વ્યાખ્યાયિત `fetchData` કાર્ય સહિત કોઈપણ બાહ્ય અવલંબનથી પરીક્ષણને અસરકારક રીતે અલગ કરે છે.
• `mockFetchData.mockResolvedValue({ name: 'Test Data' })` `fetchData` માટે એક મોક રિટર્ન વેલ્યુ સેટ કરે છે. આ તમને મોક કરેલા કાર્ય દ્વારા પરત કરવામાં આવેલ ડેટાને નિયંત્રિત કરવાની અને વિવિધ દૃશ્યોનું અનુકરણ કરવાની મંજૂરી આપે છે.
• `await waitFor(() => screen.getByText('Data:'))` "ડેટા:" ટેક્સ્ટ દેખાય ત્યાં સુધી રાહ જુએ છે, એસર્શન કરતા પહેલા મોક કરેલ API કૉલ પૂર્ણ થયો છે તેની ખાતરી કરે છે.

મોકિંગ મોડ્યુલ્સ

જેસ્ટ આખા મોડ્યુલ્સને મોક કરવા માટે શક્તિશાળી પદ્ધતિઓ પૂરી પાડે છે. જ્યારે કોઈ ઘટક બાહ્ય લાઇબ્રેરીઓ અથવા ઉપયોગિતા કાર્યો પર આધાર રાખે છે ત્યારે આ ખાસ ઉપયોગી છે.

ઉદાહરણ: તારીખ ઉપયોગિતાની નકલ કરવી

ધારો કે તમારી પાસે એક એવું ઘટક છે જે ઉપયોગિતા કાર્યનો ઉપયોગ કરીને ફોર્મેટ કરેલી તારીખ દર્શાવે છે:

ઘટક (src/components/DateDisplay.js):

            import React from 'react';
import { formatDate } from '../utils/dateUtils';

function DateDisplay({ date }) {
  const formattedDate = formatDate(date);
  return <p>The date is: {formattedDate}</p>;
}

export default DateDisplay;
            

              
                Copy
              
            
          

ઉપયોગિતા કાર્ય (src/utils/dateUtils.js):

            export function formatDate(date) {
  return date.toLocaleDateString('en-US');
}
            

              
                Copy
              
            
          

પરીક્ષણ ફાઇલ (src/components/DateDisplay.test.js):

            import React from 'react';
import { render, screen } from '@testing-library/react';
import DateDisplay from './DateDisplay';
import * as dateUtils from '../utils/dateUtils';

describe('DateDisplay Component', () => {
  it('renders the formatted date', () => {
    // Mock the formatDate function
    const mockFormatDate = jest.spyOn(dateUtils, 'formatDate');
    mockFormatDate.mockReturnValue('2024-01-01');

    render(<DateDisplay date={new Date('2024-01-01T00:00:00.000Z')} />);

    const dateElement = screen.getByText('The date is: 2024-01-01');
    expect(dateElement).toBeInTheDocument();

    // Restore the original function
    mockFormatDate.mockRestore();
  });
});
            

              
                Copy
              
            
          

સ્પષ્ટીકરણ:

• `import * as dateUtils from '../utils/dateUtils'` `dateUtils` મોડ્યુલમાંથી તમામ નિકાસ આયાત કરે છે.
• `jest.spyOn(dateUtils, 'formatDate')` `dateUtils` મોડ્યુલની અંદર `formatDate` કાર્ય પર જાસૂસ બનાવે છે. આ તમને કાર્યને કૉલ્સને ટ્રૅક કરવાની અને તેના અમલીકરણને ઓવરરાઇડ કરવાની મંજૂરી આપે છે.
• `mockFormatDate.mockReturnValue('2024-01-01')` `formatDate` માટે મોક રિટર્ન વેલ્યુ સેટ કરે છે.
• `mockFormatDate.mockRestore()` પરીક્ષણ પૂર્ણ થયા પછી કાર્યના મૂળ અમલીકરણને પુનઃસ્થાપિત કરે છે. આ સુનિશ્ચિત કરે છે કે મોક અન્ય પરીક્ષણોને અસર કરતું નથી.

આઇસોલેટેડ યુનિટ પરીક્ષણ માટેની શ્રેષ્ઠ પ્રથાઓ

આઇસોલેટેડ યુનિટ પરીક્ષણના ફાયદાઓને મહત્તમ બનાવવા માટે, આ શ્રેષ્ઠ પ્રથાઓને અનુસરો:

• પ્રથમ પરીક્ષણો લખો (TDD): વાસ્તવિક ઘટક કોડ લખતા પહેલા પરીક્ષણો લખીને ટેસ્ટ-ડ્રિવન ડેવલપમેન્ટ (TDD) નો અભ્યાસ કરો. આ જરૂરિયાતોને સ્પષ્ટ કરવામાં મદદ કરે છે અને સુનિશ્ચિત કરે છે કે ઘટકને પરીક્ષણક્ષમતાને ધ્યાનમાં રાખીને ડિઝાઇન કરવામાં આવ્યું છે.
• ઘટક તર્ક પર ધ્યાન કેન્દ્રિત કરો: ઘટકના આંતરિક તર્ક અને વર્તણૂકનું પરીક્ષણ કરવા પર ધ્યાન કેન્દ્રિત કરો, તેના રેન્ડરિંગ વિગતો પર નહીં.
• અર્થપૂર્ણ પરીક્ષણ નામોનો ઉપયોગ કરો: સ્પષ્ટ અને વર્ણનાત્મક પરીક્ષણ નામોનો ઉપયોગ કરો જે પરીક્ષણના હેતુને સચોટ રીતે પ્રતિબિંબિત કરે છે.
• પરીક્ષણોને સંક્ષિપ્ત અને કેન્દ્રિત રાખો: દરેક પરીક્ષણ ઘટકની કાર્યક્ષમતાના એક જ પાસા પર ધ્યાન કેન્દ્રિત કરવું જોઈએ.
• અતિ-મોકિંગ ટાળો: ઘટકને અલગ કરવા માટે જરૂરી હોય તેવા જ અવલંબનનું મોક કરો. અતિ-મોકિંગ એવા પરીક્ષણો તરફ દોરી શકે છે જે બરડ હોય છે અને વાસ્તવિક દુનિયાના વાતાવરણમાં ઘટકના વર્તનને સચોટ રીતે પ્રતિબિંબિત કરતા નથી.
• ધાર કેસોનું પરીક્ષણ કરો: ધારના કેસો અને બાઉન્ડ્રી પરિસ્થિતિઓનું પરીક્ષણ કરવાનું ભૂલશો નહીં જેથી ખાતરી કરી શકાય કે ઘટક અણધારી ઇનપુટને સુંદર રીતે હેન્ડલ કરે છે.
• પરીક્ષણ કવરેજ જાળવો: એ સુનિશ્ચિત કરવા માટે કે ઘટકના તમામ ભાગોનું પર્યાપ્ત પરીક્ષણ કરવામાં આવે છે, તેના માટે ઉચ્ચ પરીક્ષણ કવરેજનું લક્ષ્ય રાખો.
• પરીક્ષણોની સમીક્ષા અને રિફેક્ટર કરો: સુનિશ્ચિત કરવા માટે તમારા પરીક્ષણોની નિયમિતપણે સમીક્ષા અને રિફેક્ટર કરો કે તે સુસંગત અને જાળવવા યોગ્ય રહે.

આંતરરાષ્ટ્રીયકરણ (i18n) અને યુનિટ પરીક્ષણ

જ્યારે વૈશ્વિક પ્રેક્ષકો માટે એપ્લિકેશન્સ વિકસાવતા હોવ, ત્યારે આંતરરાષ્ટ્રીયકરણ (i18n) મહત્વપૂર્ણ છે. યુનિટ પરીક્ષણ એ સુનિશ્ચિત કરવામાં મહત્વપૂર્ણ ભૂમિકા ભજવે છે કે i18n યોગ્ય રીતે અમલમાં મૂકાયેલ છે અને એપ્લિકેશન વિવિધ સ્થાનો માટે યોગ્ય ભાષા અને ફોર્મેટમાં સામગ્રી દર્શાવે છે.

સ્થાન-વિશિષ્ટ સામગ્રીનું પરીક્ષણ

જ્યારે ઘટકોનું પરીક્ષણ કરવામાં આવે છે જે સ્થાન-વિશિષ્ટ સામગ્રી દર્શાવે છે (દા.ત., તારીખો, સંખ્યાઓ, કરન્સી, ટેક્સ્ટ), ત્યારે તમારે ખાતરી કરવાની જરૂર છે કે સામગ્રી વિવિધ સ્થાનો માટે યોગ્ય રીતે રેન્ડર કરવામાં આવી છે. આમાં સામાન્ય રીતે i18n લાઇબ્રેરીનું મોકિંગ અથવા પરીક્ષણ દરમિયાન સ્થાન-વિશિષ્ટ ડેટા પ્રદાન કરવાનો સમાવેશ થાય છે.

ઉદાહરણ: i18n સાથે તારીખ ઘટકનું પરીક્ષણ

ધારો કે તમારી પાસે એક એવું ઘટક છે જે `react-intl` જેવી i18n લાઇબ્રેરીનો ઉપયોગ કરીને તારીખ દર્શાવે છે:

ઘટક (src/components/LocalizedDate.js):

            import React from 'react';
import { FormattedDate } from 'react-intl';

function LocalizedDate({ date }) {
  return <p>The date is: <FormattedDate value={date} /></p>;
}

export default LocalizedDate;
            

              
                Copy
              
            
          

પરીક્ષણ ફાઇલ (src/components/LocalizedDate.test.js):

            import React from 'react';
import { render, screen } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
import LocalizedDate from './LocalizedDate';

describe('LocalizedDate Component', () => {
  it('renders the date in the specified locale', () => {
    const date = new Date('2024-01-01T00:00:00.000Z');

    render(
      <IntlProvider locale="fr" messages={{}}>
        <LocalizedDate date={date} />
      </IntlProvider>
    );

    // Wait for the date to be formatted
    const dateElement = screen.getByText('The date is: 01/01/2024'); // French format
    expect(dateElement).toBeInTheDocument();
  });

 it('renders the date in the default locale', () => {
    const date = new Date('2024-01-01T00:00:00.000Z');

    render(
      <IntlProvider locale="en" messages={{}}>
        <LocalizedDate date={date} />
      </IntlProvider>
    );

    // Wait for the date to be formatted
    const dateElement = screen.getByText('The date is: 1/1/2024'); // English format
    expect(dateElement).toBeInTheDocument();
  });
});
            

              
                Copy
              
            
          

સ્પષ્ટીકરણ:

• `<IntlProvider locale="fr" messages={{}}>` ઘટકને `IntlProvider` સાથે લપેટે છે, ઇચ્છિત સ્થાન અને ખાલી સંદેશ ઑબ્જેક્ટ પ્રદાન કરે છે.
• `screen.getByText('The date is: 01/01/2024')` એસર્શન કરે છે કે તારીખ ફ્રેન્ચ ફોર્મેટમાં રેન્ડર કરવામાં આવી છે (દિવસ/મહિનો/વર્ષ).

`IntlProvider` નો ઉપયોગ કરીને, તમે વિવિધ સ્થાનોનું અનુકરણ કરી શકો છો અને ચકાસી શકો છો કે તમારા ઘટકો વૈશ્વિક પ્રેક્ષકો માટે સામગ્રીને યોગ્ય રીતે રેન્ડર કરે છે.

અદ્યતન પરીક્ષણ તકનીકો

મૂળભૂત બાબતોથી આગળ, ત્યાં ઘણી અદ્યતન તકનીકો છે જે તમારી રિએક્ટ યુનિટ પરીક્ષણ વ્યૂહરચનાને વધુ વધારી શકે છે:

• સ્નેપશોટ પરીક્ષણ: સ્નેપશોટ પરીક્ષણમાં ઘટકના રેન્ડર કરેલા આઉટપુટનો સ્નેપશોટ કેપ્ચર કરવાનો અને તેની પહેલાથી સંગ્રહિત સ્નેપશોટ સાથે સરખામણી કરવાનો સમાવેશ થાય છે. આ ઘટકના UI માં અણધારી ફેરફારો શોધવામાં મદદ કરે છે. ઉપયોગી હોવા છતાં, સ્નેપશોટ પરીક્ષણોનો ઉપયોગ સમજદારીપૂર્વક થવો જોઈએ કારણ કે તે બરડ હોઈ શકે છે અને UI બદલાય ત્યારે વારંવાર અપડેટ્સની જરૂર પડે છે.
• ગુણધર્મ-આધારિત પરીક્ષણ: ગુણધર્મ-આધારિત પરીક્ષણમાં ગુણધર્મોને વ્યાખ્યાયિત કરવાનો સમાવેશ થાય છે જે ઘટક માટે હંમેશા સાચા હોવા જોઈએ, ઇનપુટ મૂલ્યોને ધ્યાનમાં લીધા વિના. આ તમને એક જ પરીક્ષણ કેસ સાથે ઇનપુટ્સની વિશાળ શ્રેણીનું પરીક્ષણ કરવાની મંજૂરી આપે છે. `jsverify` જેવી લાઇબ્રેરીઓનો ઉપયોગ જાવાસ્ક્રિપ્ટમાં ગુણધર્મ-આધારિત પરીક્ષણ માટે થઈ શકે છે.
• ઍક્સેસિબિલિટી પરીક્ષણ: ઍક્સેસિબિલિટી પરીક્ષણ એ સુનિશ્ચિત કરે છે કે તમારા ઘટકો વિકલાંગ વ્યક્તિઓ માટે સુલભ છે. `react-axe` જેવા સાધનોનો ઉપયોગ પરીક્ષણ દરમિયાન તમારા ઘટકોમાં ઍક્સેસિબિલિટી સમસ્યાઓને આપમેળે શોધવા માટે થઈ શકે છે.

નિષ્કર્ષ

આઇસોલેટેડ યુનિટ પરીક્ષણ એ રિએક્ટ કમ્પોનન્ટ પરીક્ષણનું એક મૂળભૂત પાસું છે. ઘટકોને અલગ કરીને, અવલંબનનું મોકિંગ કરીને અને શ્રેષ્ઠ પ્રથાઓને અનુસરીને, તમે મજબૂત અને જાળવવા યોગ્ય પરીક્ષણો બનાવી શકો છો જે તમારી રિએક્ટ એપ્લિકેશન્સની ગુણવત્તા સુનિશ્ચિત કરે છે. વિકાસ પ્રક્રિયા દરમિયાન શરૂઆતમાં પરીક્ષણને અપનાવવાથી અને તેને એકીકૃત કરવાથી વધુ વિશ્વસનીય સોફ્ટવેર અને વધુ આત્મવિશ્વાસુ વિકાસ ટીમ તરફ દોરી જશે. વૈશ્વિક પ્રેક્ષકો માટે વિકાસ કરતી વખતે આંતરરાષ્ટ્રીયકરણના પાસાઓને ધ્યાનમાં લેવાનું યાદ રાખો અને તમારી પરીક્ષણ વ્યૂહરચનાને વધુ વધારવા માટે અદ્યતન પરીક્ષણ તકનીકોનો ઉપયોગ કરો. યોગ્ય યુનિટ પરીક્ષણ તકનીકો શીખવામાં અને અમલમાં મૂકવામાં સમય રોકાણ કરવાથી ભૂલો ઘટાડીને, કોડની ગુણવત્તામાં સુધારો કરીને અને જાળવણીને સરળ બનાવીને લાંબા ગાળે ડિવિડન્ડ ચૂકવવામાં આવશે.