ரியாக்ட் டெஸ்டிங் லைப்ரரி: ஒரு விரிவான வழிகாட்டி

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

ரியாக்ட் டெஸ்டிங் லைப்ரரியை ஏன் தேர்ந்தெடுக்க வேண்டும்?

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

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

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

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

முன்நிபந்தனைகள்

• Node.js மற்றும் npm (அல்லது yarn): உங்கள் கணினியில் Node.js மற்றும் npm (அல்லது yarn) நிறுவப்பட்டுள்ளதா என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். அவற்றை அதிகாரப்பூர்வ Node.js இணையதளத்திலிருந்து பதிவிறக்கம் செய்யலாம்.
• ரியாக்ட் ப்ராஜெக்ட்: உங்களிடம் ஏற்கனவே ஒரு ரியாக்ட் ப்ராஜெக்ட் இருக்க வேண்டும் அல்லது Create React App அல்லது அது போன்ற கருவியைப் பயன்படுத்தி புதிய ஒன்றை உருவாக்க வேண்டும்.

நிறுவுதல்

npm அல்லது yarn பயன்படுத்தி பின்வரும் பேக்கேஜ்களை நிறுவவும்:

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

            

              
                Copy
              
            
          

அல்லது, yarn பயன்படுத்தி:

            yarn add --dev @testing-library/react @testing-library/jest-dom jest babel-jest @babel/preset-env @babel/preset-react

            

              
                Copy
              
            
          

பேக்கேஜ்களின் விளக்கம்:

• @testing-library/react: ரியாக்ட் காம்போனென்ட்களைச் சோதிப்பதற்கான முக்கிய லைப்ரரி.
• @testing-library/jest-dom: DOM முனைகளைப் பற்றி உறுதிப்படுத்த தனிப்பயன் Jest மேட்சர்களை வழங்குகிறது.
• Jest: ஒரு பிரபலமான ஜாவாஸ்கிரிப்ட் சோதனை கட்டமைப்பு.
• babel-jest: உங்கள் குறியீட்டைத் தொகுக்க Babel-ஐப் பயன்படுத்தும் ஒரு Jest டிரான்ஸ்பார்மர்.
• @babel/preset-env: உங்கள் இலக்கு சூழல்களை ஆதரிக்கத் தேவையான Babel செருகுநிரல்கள் மற்றும் முன்னமைவுகளைத் தீர்மானிக்கும் ஒரு Babel முன்னமைவு.
• @babel/preset-react: ரியாக்ட்டுக்கான ஒரு Babel முன்னமைவு.

உள்ளமைவு

உங்கள் ப்ராஜெக்ட்டின் மூலத்தில் `babel.config.js` என்ற கோப்பை பின்வரும் உள்ளடக்கத்துடன் உருவாக்கவும்:

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

            

              
                Copy
              
            
          

ஒரு சோதனை ஸ்கிரிப்டைச் சேர்க்க உங்கள் `package.json` கோப்பைப் புதுப்பிக்கவும்:

            {
  "scripts": {
    "test": "jest"
  }
}

            

              
                Copy
              
            
          

Jest-ஐ உள்ளமைக்க உங்கள் ப்ராஜெக்ட்டின் மூலத்தில் `jest.config.js` கோப்பை உருவாக்கவும். ஒரு குறைந்தபட்ச உள்ளமைவு இதுபோல் இருக்கலாம்:

            module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['/src/setupTests.js'],
};

            

              
                Copy
              
            
          

பின்வரும் உள்ளடக்கத்துடன் `src/setupTests.js` கோப்பை உருவாக்கவும். இது உங்கள் எல்லா சோதனைகளிலும் Jest DOM மேட்சர்கள் கிடைப்பதை உறுதி செய்கிறது:

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

            

              
                Copy
              
            
          

உங்கள் முதல் சோதனையை எழுதுதல்

ஒரு எளிய உதாரணத்துடன் ஆரம்பிக்கலாம். உங்களிடம் ஒரு வாழ்த்துச் செய்தியைக் காட்டும் ரியாக்ட் காம்போனென்ட் இருப்பதாக வைத்துக்கொள்வோம்:

            // src/components/Greeting.js
import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</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';

test('renders a greeting message', () => {
  render(<Greeting name="World" />);
  const greetingElement = screen.getByText(/Hello, World!/i);
  expect(greetingElement).toBeInTheDocument();
});

            

              
                Copy
              
            
          

விளக்கம்:

• `render`: இந்தச் செயல்பாடு காம்போனென்ட்டை DOM-ல் ரெண்டர் செய்கிறது.
• `screen`: இந்த ஆப்ஜெக்ட் DOM-ஐ வினவுவதற்கான முறைகளை வழங்குகிறது.
• `getByText`: இந்த முறை ஒரு எலிமெண்ட்டை அதன் உரை உள்ளடக்கத்தால் கண்டறிகிறது. `/i` கொடி தேடலை எழுத்து-வடிவமற்றதாக ஆக்குகிறது.
• `expect`: இந்தச் செயல்பாடு காம்போனென்ட்டின் நடத்தை பற்றிய உறுதிமொழிகளைச் செய்யப் பயன்படுகிறது.
• `toBeInTheDocument`: இந்த மேட்சர் எலிமெண்ட் DOM-ல் இருப்பதாய் உறுதி செய்கிறது.

சோதனையை இயக்க, உங்கள் டெர்மினலில் பின்வரும் கட்டளையை இயக்கவும்:

            npm test

            

              
                Copy
              
            
          

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

பொதுவான RTL வினவல்கள்

RTL, DOM-ல் எலிமெண்ட்டுகளைக் கண்டறிய பல்வேறு வினவல் முறைகளை வழங்குகிறது. இந்த வினவல்கள் பயனர்கள் உங்கள் செயலியுடன் எவ்வாறு தொடர்புகொள்கிறார்கள் என்பதைப் பிரதிபலிக்கும் வகையில் வடிவமைக்கப்பட்டுள்ளன.

`getByRole`

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

            <button role="button">Click me</button>

            

              
                Copy
              
            
          

            const buttonElement = screen.getByRole('button');
expect(buttonElement).toBeInTheDocument();

            

              
                Copy
              
            
          

`getByLabelText`

இந்த வினவல் ஒரு எலிமெண்ட்டை அதனுடன் தொடர்புடைய லேபிளின் உரை மூலம் கண்டறிகிறது. இது படிவ எலிமெண்ட்டுகளைச் சோதிக்கப் பயன்படும்.

            <label htmlFor="name">Name:</label>
<input type="text" id="name" />

            

              
                Copy
              
            
          

            const nameInputElement = screen.getByLabelText('Name:');
expect(nameInputElement).toBeInTheDocument();

            

              
                Copy
              
            
          

`getByPlaceholderText`

இந்த வினவல் ஒரு எலிமெண்ட்டை அதன் ப்ளேஸ்ஹோல்டர் உரை மூலம் கண்டறிகிறது.

            <input type="text" placeholder="Enter your email" />

            

              
                Copy
              
            
          

            const emailInputElement = screen.getByPlaceholderText('Enter your email');
expect(emailInputElement).toBeInTheDocument();

            

              
                Copy
              
            
          

`getByAltText`

இந்த வினவல் ஒரு பட எலிமெண்ட்டை அதன் மாற்று உரை (alt text) மூலம் கண்டறிகிறது. அணுகல்தன்மையை உறுதிப்படுத்த அனைத்து படங்களுக்கும் அர்த்தமுள்ள மாற்று உரையை வழங்குவது முக்கியம்.

            <img src="logo.png" alt="Company Logo" />

            

              
                Copy
              
            
          

            const logoImageElement = screen.getByAltText('Company Logo');
expect(logoImageElement).toBeInTheDocument();

            

              
                Copy
              
            
          

`getByTitle`

இந்த வினவல் ஒரு எலிமெண்ட்டை அதன் தலைப்பு பண்புக்கூறு (title attribute) மூலம் கண்டறிகிறது.

            <span title="Close">X</span>

            

              
                Copy
              
            
          

            const closeElement = screen.getByTitle('Close');
expect(closeElement).toBeInTheDocument();

            

              
                Copy
              
            
          

`getByDisplayValue`

இந்த வினவல் ஒரு எலிமெண்ட்டை அதன் காட்சி மதிப்பு (display value) மூலம் கண்டறிகிறது. இது முன் நிரப்பப்பட்ட மதிப்புகளுடன் கூடிய படிவ உள்ளீடுகளைச் சோதிக்கப் பயன்படும்.

            <input type="text" value="Initial Value" />

            

              
                Copy
              
            
          

            const inputElement = screen.getByDisplayValue('Initial Value');
expect(inputElement).toBeInTheDocument();

            

              
                Copy
              
            
          

`getAllBy*` வினவல்கள்

`getBy*` வினவல்களுக்கு கூடுதலாக, RTL `getAllBy*` வினவல்களையும் வழங்குகிறது, இது பொருந்தும் எலிமெண்ட்டுகளின் வரிசையைத் தரும். ஒரே குணாதிசயங்களைக் கொண்ட பல எலிமெண்ட்டுகள் DOM-ல் உள்ளன என்பதை உறுதிப்படுத்த வேண்டியிருக்கும் போது இது பயனுள்ளதாக இருக்கும்.

            <li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

            

              
                Copy
              
            
          

            const listItems = screen.getAllByRole('listitem');
expect(listItems).toHaveLength(3);

            

              
                Copy
              
            
          

`queryBy*` வினவல்கள்

`queryBy*` வினவல்கள் `getBy*` வினவல்களைப் போலவே இருக்கின்றன, ஆனால் பொருந்தும் எலிமெண்ட் எதுவும் கிடைக்கவில்லை என்றால், பிழையை உண்டாக்குவதற்குப் பதிலாக `null`-ஐத் தரும். DOM-ல் ஒரு எலிமெண்ட் *இல்லை* என்று உறுதிப்படுத்த விரும்பும்போது இது பயனுள்ளதாக இருக்கும்.

            const missingElement = screen.queryByText('Non-existent text');
expect(missingElement).toBeNull();

            

              
                Copy
              
            
          

`findBy*` வினவல்கள்

`findBy*` வினவல்கள் `getBy*` வினவல்களின் ஒத்திசைவற்ற (asynchronous) பதிப்புகள் ஆகும். அவை பொருந்தும் எலிமெண்ட் கண்டறியப்பட்டவுடன் தீர்க்கப்படும் ஒரு Promise-ஐத் தரும். ஒரு API-இலிருந்து தரவைப் பெறுவது போன்ற ஒத்திசைவற்ற செயல்பாடுகளைச் சோதிக்க இவை பயனுள்ளதாக இருக்கும்.

            // Simulating an asynchronous data fetch
const fetchData = () => new Promise(resolve => {
  setTimeout(() => resolve('Data Loaded!'), 1000);
});

function MyComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(setData);
  }, []);

  return <div>{data}</div>;
}

            

              
                Copy
              
            
          

            test('loads data asynchronously', async () => {
  render(<MyComponent />);
  const dataElement = await screen.findByText('Data Loaded!');
  expect(dataElement).toBeInTheDocument();
});

            

              
                Copy
              
            
          

பயனர் தொடர்புகளை உருவகப்படுத்துதல்

RTL, பொத்தான்களை அழுத்துதல், உள்ளீட்டு புலங்களில் தட்டச்சு செய்தல் மற்றும் படிவங்களைச் சமர்ப்பித்தல் போன்ற பயனர் தொடர்புகளை உருவகப்படுத்த `fireEvent` மற்றும் `userEvent` API-களை வழங்குகிறது.

`fireEvent`

`fireEvent` நிரல்ரீதியாக DOM நிகழ்வுகளைத் தூண்ட உங்களை அனுமதிக்கிறது. இது ஒரு கீழ்-நிலை API ஆகும், இது தூண்டப்படும் நிகழ்வுகள் மீது உங்களுக்கு நுண்ணிய கட்டுப்பாட்டை வழங்குகிறது.

            <button onClick={() => alert('Button clicked!')}>Click me</button>

            

              
                Copy
              
            
          

            import { fireEvent } from '@testing-library/react';

test('simulates a button click', () => {
  const alertMock = jest.spyOn(window, 'alert').mockImplementation(() => {});
  render(<button onClick={() => alert('Button clicked!')}>Click me</button>);
  const buttonElement = screen.getByRole('button');
  fireEvent.click(buttonElement);
  expect(alertMock).toHaveBeenCalledTimes(1);
  alertMock.mockRestore();
});

            

              
                Copy
              
            
          

`userEvent`

`userEvent` என்பது ஒரு உயர்-நிலை API ஆகும், இது பயனர் தொடர்புகளை மிகவும் யதார்த்தமாக உருவகப்படுத்துகிறது. இது கவனம் மேலாண்மை மற்றும் நிகழ்வு வரிசைப்படுத்துதல் போன்ற விவரங்களைக் கையாளுகிறது, உங்கள் சோதனைகளை மேலும் உறுதியானதாகவும், குறைவாக உடையக்கூடியதாகவும் ஆக்குகிறது.

            <input type="text" onChange={e => console.log(e.target.value)} />

            

              
                Copy
              
            
          

            import userEvent from '@testing-library/user-event';

test('simulates typing in an input field', () => {
  const inputElement = screen.getByRole('textbox');
  userEvent.type(inputElement, 'Hello, world!');
  expect(inputElement).toHaveValue('Hello, world!');
});

            

              
                Copy
              
            
          

ஒத்திசைவற்ற குறியீட்டைச் சோதித்தல்

பல ரியாக்ட் செயலிகள் ஒரு API-இலிருந்து தரவைப் பெறுவது போன்ற ஒத்திசைவற்ற செயல்பாடுகளை உள்ளடக்கியுள்ளன. RTL ஒத்திசைவற்ற குறியீட்டைச் சோதிக்க பல கருவிகளை வழங்குகிறது.

`waitFor`

`waitFor` ஒரு உறுதிமொழியைச் செய்வதற்கு முன் ஒரு நிபந்தனை உண்மையாக மாறும் வரை காத்திருக்க உங்களை அனுமதிக்கிறது. இது சிறிது நேரம் எடுக்கும் ஒத்திசைவற்ற செயல்பாடுகளைச் சோதிக்கப் பயன்படும்.

            function MyComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    setTimeout(() => {
      setData('Data loaded!');
    }, 1000);
  }, []);

  return <div>{data}</div>;
}

            

              
                Copy
              
            
          

            import { waitFor } from '@testing-library/react';

test('waits for data to load', async () => {
  render(<MyComponent />);
  await waitFor(() => screen.getByText('Data loaded!'));
  const dataElement = screen.getByText('Data loaded!');
  expect(dataElement).toBeInTheDocument();
});

            

              
                Copy
              
            
          

`findBy*` வினவல்கள்

முன்னர் குறிப்பிட்டபடி, `findBy*` வினவல்கள் ஒத்திசைவற்றவை மற்றும் பொருந்தும் எலிமெண்ட் கண்டறியப்பட்டவுடன் தீர்க்கப்படும் ஒரு Promise-ஐத் தருகின்றன. DOM-ல் மாற்றங்களை ஏற்படுத்தும் ஒத்திசைவற்ற செயல்பாடுகளைச் சோதிக்க இவை பயனுள்ளதாக இருக்கும்.

ஹூக்குகளைச் சோதித்தல்

ரியாக்ட் ஹூக்குகள் நிலைசார் தர்க்கத்தை உள்ளடக்கிய மீண்டும் பயன்படுத்தக்கூடிய செயல்பாடுகளாகும். RTL, தனிப்பயன் ஹூக்குகளைத் தனிமைப்படுத்திச் சோதிக்க `@testing-library/react-hooks`-இலிருந்து `renderHook` பயன்பாட்டை வழங்குகிறது (இது v17 முதல் `@testing-library/react`-க்கு ஆதரவாக வழக்கொழிந்துவிட்டது).

            // src/hooks/useCounter.js
import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  const decrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  return { count, increment, decrement };
}

export default useCounter;

            

              
                Copy
              
            
          

            // src/hooks/useCounter.test.js
import { renderHook, act } from '@testing-library/react';
import useCounter from './useCounter';

test('increments the counter', () => {
  const { result } = renderHook(() => useCounter());

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});

            

              
                Copy
              
            
          

விளக்கம்:

• `renderHook`: இந்தச் செயல்பாடு ஹூக்கை ரெண்டர் செய்து, ஹூக்கின் முடிவைக் கொண்ட ஒரு ஆப்ஜெக்டைத் தருகிறது.
• `act`: இந்தச் செயல்பாடு நிலை புதுப்பிப்புகளை ஏற்படுத்தும் எந்த குறியீட்டையும் சுற்றப் பயன்படுகிறது. இது ரியாக்ட் புதுப்பிப்புகளைச் சரியாகத் தொகுத்துச் செயல்படுத்த முடியும் என்பதை உறுதி செய்கிறது.

மேம்பட்ட சோதனை நுட்பங்கள்

நீங்கள் RTL-இன் அடிப்படைகளைக் கற்றுக்கொண்டவுடன், உங்கள் சோதனைகளின் தரத்தையும் பராமரிப்பையும் மேம்படுத்த மேலும் மேம்பட்ட சோதனை நுட்பங்களை ஆராயலாம்.

தொகுதிக்கூறுகளை போலச் செய்தல் (Mocking Modules)

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

            // src/api/dataService.js
export const fetchData = async () => {
  const response = await fetch('/api/data');
  const data = await response.json();
  return data;
};

            

              
                Copy
              
            
          

            // src/components/MyComponent.js
import React, { useState, useEffect } from 'react';
import { fetchData } from '../api/dataService';

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

  useEffect(() => {
    fetchData().then(setData);
  }, []);

  return <div>{data}</div>;
}

            

              
                Copy
              
            
          

            // src/components/MyComponent.test.js
import { render, screen, waitFor } from '@testing-library/react';
import MyComponent from './MyComponent';
import * as dataService from '../api/dataService';

jest.mock('../api/dataService');

test('fetches data from the API', async () => {
  dataService.fetchData.mockResolvedValue({ message: 'Mocked data!' });

  render(<MyComponent />);

  await waitFor(() => screen.getByText('Mocked data!'));

  expect(screen.getByText('Mocked data!')).toBeInTheDocument();
  expect(dataService.fetchData).toHaveBeenCalledTimes(1);
});

            

              
                Copy
              
            
          

விளக்கம்:

• `jest.mock('../api/dataService')`: இந்த வரி `dataService` தொகுதிக்கூற்றைப் போலச் செய்கிறது.
• `dataService.fetchData.mockResolvedValue({ message: 'Mocked data!' })`: இந்த வரி போலச் செய்யப்பட்ட `fetchData` செயல்பாட்டை, குறிப்பிட்ட தரவுகளுடன் தீர்க்கப்படும் ஒரு Promise-ஐத் தருமாறு உள்ளமைக்கிறது.
• `expect(dataService.fetchData).toHaveBeenCalledTimes(1)`: இந்த வரி போலச் செய்யப்பட்ட `fetchData` செயல்பாடு ஒரு முறை அழைக்கப்பட்டதாக உறுதி செய்கிறது.

சூழல் வழங்குநர்கள் (Context Providers)

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

            // src/contexts/ThemeContext.js
import React, { createContext, useState } from 'react';

export const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

            

              
                Copy
              
            
          

            // src/components/MyComponent.js
import React, { useContext } from 'react';
import { ThemeContext } from '../contexts/ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ backgroundColor: theme === 'light' ? '#fff' : '#000', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>Current theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

            

              
                Copy
              
            
          

            // src/components/MyComponent.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
import { ThemeProvider } from '../contexts/ThemeContext';

test('toggles the theme', () => {
  render(
    <ThemeProvider>
      <MyComponent />
    </ThemeProvider>
  );

  const themeParagraph = screen.getByText(/Current theme: light/i);
  const toggleButton = screen.getByRole('button', { name: /Toggle Theme/i });

  expect(themeParagraph).toBeInTheDocument();

  fireEvent.click(toggleButton);

  expect(screen.getByText(/Current theme: dark/i)).toBeInTheDocument();
});

            

              
                Copy
              
            
          

விளக்கம்:

• சோதனையின் போது தேவையான சூழலை வழங்க `MyComponent`-ஐ `ThemeProvider`-ல் சுற்றுகிறோம்.

ரவுட்டருடன் சோதித்தல்

ரியாக்ட் ரவுட்டரைப் பயன்படுத்தும் காம்போனென்ட்களைச் சோதிக்கும்போது, நீங்கள் ஒரு போலி ரவுட்டர் சூழலை வழங்க வேண்டும். `react-router-dom`-இலிருந்து `MemoryRouter` காம்போனென்ட்டைப் பயன்படுத்தி இதை நீங்கள் அடையலாம்.

            // src/components/MyComponent.js
import React from 'react';
import { Link } from 'react-router-dom';

function MyComponent() {
  return (
    <div>
      <Link to="/about">Go to About Page</Link>
    </div>
  );
}

            

              
                Copy
              
            
          

            // src/components/MyComponent.test.js
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import MyComponent from './MyComponent';

test('renders a link to the about page', () => {
  render(
    <MemoryRouter>
      <MyComponent />
    </MemoryRouter>
  );

  const linkElement = screen.getByRole('link', { name: /Go to About Page/i });
  expect(linkElement).toBeInTheDocument();
  expect(linkElement).toHaveAttribute('href', '/about');
});

            

              
                Copy
              
            
          

விளக்கம்:

• ஒரு போலி ரவுட்டர் சூழலை வழங்க `MyComponent`-ஐ `MemoryRouter`-ல் சுற்றுகிறோம்.
• இணைப்பு எலிமெண்ட் சரியான `href` பண்புக்கூறைக் கொண்டிருப்பதாக நாங்கள் உறுதி செய்கிறோம்.

பயனுள்ள சோதனைகளை எழுதுவதற்கான சிறந்த நடைமுறைகள்

RTL உடன் சோதனைகளை எழுதும்போது பின்பற்ற வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:

• பயனர் தொடர்புகளில் கவனம் செலுத்துங்கள்: பயனர்கள் உங்கள் செயலியுடன் எவ்வாறு தொடர்புகொள்கிறார்கள் என்பதை உருவகப்படுத்தும் சோதனைகளை எழுதுங்கள்.
• செயலாக்க விவரங்களைச் சோதிப்பதைத் தவிர்க்கவும்: உங்கள் காம்போனென்ட்களின் உள் செயல்பாடுகளைச் சோதிக்க வேண்டாம். அதற்கு பதிலாக, கவனிக்கக்கூடிய நடத்தையில் கவனம் செலுத்துங்கள்.
• தெளிவான மற்றும் சுருக்கமான சோதனைகளை எழுதுங்கள்: உங்கள் சோதனைகளைப் புரிந்துகொள்வதற்கும் பராமரிப்பதற்கும் எளிதாக்குங்கள்.
• அர்த்தமுள்ள சோதனைப் பெயர்களைப் பயன்படுத்துங்கள்: சோதிக்கப்படும் நடத்தையைத் துல்லியமாக விவரிக்கும் சோதனைப் பெயர்களைத் தேர்வுசெய்யுங்கள்.
• சோதனைகளைத் தனிமைப்படுத்தவும்: சோதனைகளுக்கு இடையில் சார்புகளைத் தவிர்க்கவும். ஒவ்வொரு சோதனையும் சுயாதீனமாகவும் தன்னிறைவாகவும் இருக்க வேண்டும்.
• விளிம்பு நிலைகளைச் சோதிக்கவும்: மகிழ்ச்சியான பாதையை மட்டும் சோதிக்க வேண்டாம். விளிம்பு நிலைகள் மற்றும் பிழை நிபந்தனைகளையும் சோதிப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
• நீங்கள் குறியீடு எழுதுவதற்கு முன் சோதனைகளை எழுதுங்கள்: உங்கள் குறியீட்டை எழுதுவதற்கு முன் சோதனைகளை எழுத டெஸ்ட்-டிரைவன் டெவலப்மெண்ட் (TDD) பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
• "AAA" முறையைப் பின்பற்றவும்: ஏற்பாடு, செயல், உறுதிப்படுத்தல் (Arrange, Act, Assert). இந்த முறை உங்கள் சோதனைகளை கட்டமைக்கவும், அவற்றை மேலும் படிக்கக்கூடியதாக மாற்றவும் உதவுகிறது.
• உங்கள் சோதனைகளை வேகமாக வைத்திருங்கள்: மெதுவான சோதனைகள் டெவலப்பர்களை அடிக்கடி இயக்குவதைத் தடுக்கலாம். நெட்வொர்க் கோரிக்கைகளைப் போலச் செய்வதன் மூலமும், DOM கையாளுதலின் அளவைக் குறைப்பதன் மூலமும் உங்கள் சோதனைகளை வேகத்திற்கு உகந்ததாக்குங்கள்.
• விளக்கமான பிழைச் செய்திகளைப் பயன்படுத்தவும்: உறுதிமொழிகள் தோல்வியுற்றால், தோல்விக்கான காரணத்தை விரைவாக அடையாளம் காண பிழைச் செய்திகள் போதுமான தகவல்களை வழங்க வேண்டும்.

முடிவுரை

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