ரியாக்ட் காம்போனென்ட் டெஸ்டிங்: தனிமைப்படுத்தப்பட்ட யூனிட் டெஸ்டிங்கிற்கான ஒரு விரிவான வழிகாட்டி

நவீன வலை மேம்பாட்டு உலகில், வலுவான மற்றும் பராமரிக்கக்கூடிய பயன்பாடுகளை உருவாக்குவது மிக முக்கியம். பயனர் இடைமுகங்களை உருவாக்குவதற்கான ஒரு முன்னணி ஜாவாஸ்கிரிப்ட் லைப்ரரியான ரியாக்ட், டெவலப்பர்களுக்கு ஆற்றல்மிக்க மற்றும் ஊடாடும் வலை அனுபவங்களை உருவாக்க உதவுகிறது. இருப்பினும், ரியாக்ட் பயன்பாடுகளின் சிக்கலான தன்மை, குறியீட்டின் தரத்தை உறுதிப்படுத்தவும், பின்னடைவுகளைத் தடுக்கவும் ஒரு விரிவான சோதனை உத்தியை அவசியமாக்குகிறது. இந்த வழிகாட்டி ரியாக்ட் சோதனையின் ஒரு முக்கிய அம்சத்தில் கவனம் செலுத்துகிறது: தனிமைப்படுத்தப்பட்ட யூனிட் டெஸ்டிங்.

தனிமைப்படுத்தப்பட்ட யூனிட் டெஸ்டிங் என்றால் என்ன?

தனிமைப்படுத்தப்பட்ட யூனிட் டெஸ்டிங் என்பது ஒரு மென்பொருள் சோதனை நுட்பமாகும், இதில் ஒரு பயன்பாட்டின் தனிப்பட்ட அலகுகள் அல்லது கூறுகள் அமைப்பின் மற்ற பகுதிகளிலிருந்து தனிமைப்படுத்தப்பட்டு சோதிக்கப்படுகின்றன. ரியாக்டின் சூழலில், இது தனிப்பட்ட ரியாக்ட் காம்போனென்ட்களை அவற்றின் சார்புகளான சைல்டு காம்போனென்ட்கள், வெளிப்புற ஏபிஐ-கள் அல்லது ரிடக்ஸ் ஸ்டோர் போன்றவற்றைச் சாராமல் சோதிப்பதாகும். ஒவ்வொரு காம்போனென்ட்டும் சரியாகச் செயல்படுகிறதா என்பதைச் சரிபார்ப்பதும், குறிப்பிட்ட உள்ளீடுகளைக் கொடுக்கும்போது வெளிப்புறக் காரணிகளின் செல்வாக்கு இல்லாமல் எதிர்பார்த்த வெளியீட்டை உருவாக்குகிறதா என்பதைச் சரிபார்ப்பதும் முதன்மை இலக்காகும்.

தனிமைப்படுத்தல் ஏன் முக்கியம்?

சோதனையின் போது காம்போனென்ட்களைத் தனிமைப்படுத்துவது பல முக்கிய நன்மைகளை வழங்குகிறது:

• வேகமான சோதனை செயலாக்கம்: தனிமைப்படுத்தப்பட்ட சோதனைகள் மிகவும் வேகமாகச் செயல்படுத்தப்படுகின்றன, ஏனெனில் அவை சிக்கலான அமைப்பு அல்லது வெளிப்புற சார்புகளுடன் தொடர்புகளை உள்ளடக்காது. இது மேம்பாட்டு சுழற்சியை வேகப்படுத்துகிறது மற்றும் அடிக்கடி சோதனை செய்ய அனுமதிக்கிறது.
• கவனம் செலுத்தப்பட்ட பிழை கண்டறிதல்: ஒரு சோதனை தோல்வியடையும் போது, காரணம் உடனடியாகத் தெளிவாகத் தெரிகிறது, ஏனெனில் சோதனை ஒரு ஒற்றை காம்போனென்ட் மற்றும் அதன் உள் தர்க்கத்தில் கவனம் செலுத்துகிறது. இது பிழைத்திருத்தத்தை எளிதாக்குகிறது மற்றும் பிழைகளைக் கண்டறிந்து சரிசெய்யத் தேவைப்படும் நேரத்தைக் குறைக்கிறது.
• குறைக்கப்பட்ட சார்புகள்: தனிமைப்படுத்தப்பட்ட சோதனைகள் பயன்பாட்டின் மற்ற பகுதிகளில் ஏற்படும் மாற்றங்களால் குறைவாக பாதிக்கப்படுகின்றன. இது சோதனைகளை மேலும் நெகிழ்ச்சியுள்ளதாக ஆக்குகிறது மற்றும் தவறான நேர்மறை அல்லது எதிர்மறைகளின் அபாயத்தைக் குறைக்கிறது.
• மேம்படுத்தப்பட்ட குறியீட்டு வடிவமைப்பு: தனிமைப்படுத்தப்பட்ட சோதனைகளை எழுதுவது, டெவலப்பர்களைத் தெளிவான பொறுப்புகள் மற்றும் நன்கு வரையறுக்கப்பட்ட இடைமுகங்களுடன் காம்போனென்ட்களை வடிவமைக்க ஊக்குவிக்கிறது. இது மாடுலாரிட்டியை ஊக்குவிக்கிறது மற்றும் பயன்பாட்டின் ஒட்டுமொத்த கட்டமைப்பை மேம்படுத்துகிறது.
• மேம்படுத்தப்பட்ட சோதனைத்திறன்: காம்போனென்ட்களைத் தனிமைப்படுத்துவதன் மூலம், டெவலப்பர்கள் எளிதாக சார்புகளை மாக் அல்லது ஸ்டப் செய்யலாம், இது நிஜ உலக சூழலில் மீண்டும் உருவாக்குவது கடினமாக இருக்கும் பல்வேறு சூழ்நிலைகளையும் எட்ஜ் கேஸ்களையும் உருவகப்படுத்த அனுமதிக்கிறது.

ரியாக்ட் யூனிட் டெஸ்டிங்கிற்கான கருவிகள் மற்றும் லைப்ரரிகள்

ரியாக்ட் யூனிட் டெஸ்டிங்கை எளிதாக்க பல சக்திவாய்ந்த கருவிகள் மற்றும் லைப்ரரிகள் கிடைக்கின்றன. இங்கே மிகவும் பிரபலமான சில தேர்வுகள்:

• ஜெஸ்ட் (Jest): ஜெஸ்ட் என்பது பேஸ்புக் (இப்போது மெட்டா) உருவாக்கிய ஒரு ஜாவாஸ்கிரிப்ட் டெஸ்டிங் பிரேம்வொர்க் ஆகும், இது குறிப்பாக ரியாக்ட் பயன்பாடுகளைச் சோதிப்பதற்காக வடிவமைக்கப்பட்டுள்ளது. இது மாக்கிங், அசெர்ஷன் லைப்ரரிகள் மற்றும் குறியீட்டு கவரேஜ் பகுப்பாய்வு உள்ளிட்ட விரிவான அம்சங்களை வழங்குகிறது. ஜெஸ்ட் அதன் பயன்பாட்டின் எளிமை மற்றும் சிறந்த செயல்திறனுக்காக அறியப்படுகிறது.
• ரியாக்ட் டெஸ்டிங் லைப்ரரி: ரியாக்ட் டெஸ்டிங் லைப்ரரி என்பது ஒரு இலகுரக சோதனை லைப்ரரி ஆகும், இது பயனரின் கண்ணோட்டத்தில் காம்போனென்ட்களைச் சோதிக்க ஊக்குவிக்கிறது. இது பயனர் தொடர்புகளை உருவகப்படுத்தும் விதத்தில் காம்போனென்ட்களை வினவுவதற்கும் ஊடாடுவதற்கும் பயனுள்ள செயல்பாடுகளின் தொகுப்பை வழங்குகிறது. இந்த அணுகுமுறை பயனர் அனுபவத்துடன் மிகவும் நெருக்கமாகப் பொருந்தக்கூடிய சோதனைகளை எழுத ஊக்குவிக்கிறது.
• என்சைம் (Enzyme): என்சைம் என்பது ஏர்பின்பி (Airbnb) உருவாக்கிய ரியாக்டிற்கான ஒரு ஜாவாஸ்கிரிப்ட் டெஸ்டிங் யூட்டிலிட்டி ஆகும். இது ரியாக்ட் காம்போனென்ட்களை ரெண்டர் செய்வதற்கும், ப்ராப்ஸ், ஸ்டேட் மற்றும் லைப்சைகிள் மெத்தட்கள் போன்ற அவற்றின் உள் கூறுகளுடன் ஊடாடுவதற்கும் செயல்பாடுகளின் தொகுப்பை வழங்குகிறது. பல திட்டங்களில் இன்னும் பயன்படுத்தப்பட்டாலும், புதிய திட்டங்களுக்கு பொதுவாக ரியாக்ட் டெஸ்டிங் லைப்ரரி விரும்பப்படுகிறது.
• மோக்கா (Mocha): மோக்கா என்பது ஒரு நெகிழ்வான ஜாவாஸ்கிரிப்ட் டெஸ்டிங் பிரேம்வொர்க் ஆகும், இது பல்வேறு அசெர்ஷன் லைப்ரரிகள் மற்றும் மாக்கிங் பிரேம்வொர்க்குகளுடன் பயன்படுத்தப்படலாம். இது ஒரு சுத்தமான மற்றும் தனிப்பயனாக்கக்கூடிய சோதனை சூழலை வழங்குகிறது.
• சாய் (Chai): சாய் என்பது மோக்கா அல்லது பிற சோதனை பிரேம்வொர்க்குகளுடன் பயன்படுத்தக்கூடிய ஒரு பிரபலமான அசெர்ஷன் லைப்ரரி ஆகும். இது எக்ஸ்பெக்ட், ஷுட், மற்றும் அசெர்ட் உள்ளிட்ட வளமான அசெர்ஷன் பாணிகளின் தொகுப்பை வழங்குகிறது.
• சினோன்.ஜேஎஸ் (Sinon.JS): சினோன்.ஜேஎஸ் என்பது ஜாவாஸ்கிரிப்டிற்கான ஒரு தனிப்பட்ட டெஸ்ட் ஸ்பைஸ், ஸ்டப்ஸ் மற்றும் மாக்குகள் ஆகும். இது எந்த யூனிட் டெஸ்டிங் பிரேம்வொர்க்குடனும் வேலை செய்யும்.

பெரும்பாலான நவீன ரியாக்ட் திட்டங்களுக்கு, பரிந்துரைக்கப்படும் கலவை ஜெஸ்ட் மற்றும் ரியாக்ட் டெஸ்டிங் லைப்ரரி ஆகும். இந்த கலவை ரியாக்ட் சோதனைக்கான சிறந்த நடைமுறைகளுடன் நன்கு பொருந்தக்கூடிய ஒரு சக்திவாய்ந்த மற்றும் உள்ளுணர்வு சோதனை அனுபவத்தை வழங்குகிறது.

உங்கள் சோதனை சூழலை அமைத்தல்

நீங்கள் யூனிட் டெஸ்ட்களை எழுதத் தொடங்குவதற்கு முன், உங்கள் சோதனை சூழலை அமைக்க வேண்டும். ஜெஸ்ட் மற்றும் ரியாக்ட் டெஸ்டிங் லைப்ரரியை அமைப்பதற்கான படிப்படியான வழிகாட்டி இங்கே:

1. சார்புகளை நிறுவுதல்:

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

   • jest: ஜெஸ்ட் டெஸ்டிங் பிரேம்வொர்க்.
   • @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
              
            
          

சார்புகளை மாக்கிங் செய்தல்

தனிமைப்படுத்தப்பட்ட யூனிட் டெஸ்டிங்கில், சோதனை முடிவுகளை வெளிப்புற காரணிகள் பாதிப்பதைத் தடுக்க சார்புகளை மாக்கிங் செய்வது பெரும்பாலும் அவசியமாகிறது. மாக்கிங் என்பது உண்மையான சார்புகளை சோதனையின் போது கட்டுப்படுத்த மற்றும் கையாளக்கூடிய எளிமைப்படுத்தப்பட்ட பதிப்புகளுடன் மாற்றுவதை உள்ளடக்குகிறது.

எடுத்துக்காட்டு: ஒரு செயல்பாட்டை மாக்கிங் செய்தல்

ஒரு ஏபிஐ-யிலிருந்து தரவைப் பெறும் ஒரு காம்போனென்ட் நம்மிடம் உள்ளது என்று வைத்துக்கொள்வோம்:

காம்போனென்ட் (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:'))` "Data:" உரை தோன்றும் வரை காத்திருக்கிறது, இது உறுதிகளைச் செய்வதற்கு முன் மாக்கிங் செய்யப்பட்ட ஏபிஐ அழைப்பு முடிந்துவிட்டது என்பதை உறுதி செய்கிறது.

மாடியூல்களை மாக்கிங் செய்தல்

ஜெஸ்ட் முழு மாடியூல்களையும் மாக்கிங் செய்ய சக்திவாய்ந்த வழிமுறைகளை வழங்குகிறது. ஒரு காம்போனென்ட் வெளிப்புற லைப்ரரிகள் அல்லது யூட்டிலிட்டி செயல்பாடுகளை நம்பியிருக்கும் போது இது குறிப்பாக பயனுள்ளதாக இருக்கும்.

எடுத்துக்காட்டு: ஒரு தேதி யூட்டிலிட்டியை மாக்கிங் செய்தல்

ஒரு யூட்டிலிட்டி செயல்பாட்டைப் பயன்படுத்தி வடிவமைக்கப்பட்ட தேதியைக் காட்டும் ஒரு காம்போனென்ட் உங்களிடம் உள்ளது என்று வைத்துக்கொள்வோம்:

காம்போனென்ட் (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` போன்ற கருவிகள் சோதனையின் போது உங்கள் காம்போனென்ட்களில் உள்ள அணுகல்தன்மை சிக்கல்களைத் தானாகக் கண்டறியப் பயன்படுத்தப்படலாம்.

முடிவுரை

தனிமைப்படுத்தப்பட்ட யூனிட் டெஸ்டிங் என்பது ரியாக்ட் காம்போனென்ட் டெஸ்டிங்கின் ஒரு அடிப்படை அம்சமாகும். காம்போனென்ட்களைத் தனிமைப்படுத்துதல், சார்புகளை மாக்கிங் செய்தல் மற்றும் சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உங்கள் ரியாக்ட் பயன்பாடுகளின் தரத்தை உறுதிசெய்யும் வலுவான மற்றும் பராமரிக்கக்கூடிய சோதனைகளை நீங்கள் உருவாக்கலாம். சோதனையை ஆரம்பத்திலேயே ஏற்றுக்கொண்டு, மேம்பாட்டு செயல்முறை முழுவதும் அதை ஒருங்கிணைப்பது மிகவும் நம்பகமான மென்பொருளுக்கும், அதிக நம்பிக்கையுள்ள மேம்பாட்டுக் குழுவிற்கும் வழிவகுக்கும். உலகளாவிய பார்வையாளர்களுக்காக உருவாக்கும்போது சர்வதேசமயமாக்கல் அம்சங்களைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள், மேலும் உங்கள் சோதனை உத்தியை மேலும் மேம்படுத்த மேம்பட்ட சோதனை நுட்பங்களைப் பயன்படுத்துங்கள். சரியான யூனிட் டெஸ்டிங் நுட்பங்களைக் கற்றுக்கொள்வதற்கும் செயல்படுத்துவதற்கும் நேரத்தை முதலீடு செய்வது, பிழைகளைக் குறைப்பதன் மூலமும், குறியீட்டின் தரத்தை மேம்படுத்துவதன் மூலமும், பராமரிப்பை எளிதாக்குவதன் மூலமும் நீண்ட காலத்திற்குப் பலனளிக்கும்.