Snapshot Testing क्या है
In this page:
test("matches snapshot", () => {
const { container } = render(<Component />);
expect(container).toMatchSnapshot();
});एक Snapshot Test क्या करता है
toMatchSnapshot() एक component render करता है, इसके output को text में serialize करता है, और इसे test पहली बार run होने पर एक snapshot file में save करता है।
हर subsequent run पर, Jest नए output को saved snapshot के against compare करता है और अगर कुछ भी differ करे तो test fail कर देता है।
उदाहरण: What a Snapshot Test Does
// Run in your local React project (npm install required)
import { render } from '@testing-library/react';
import Card from './Card';
test('Card renders correctly', () => {
const { container } = render(<Card title="Hello" />);
expect(container).toMatchSnapshot();
});⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
एक Snapshot Diff Review करना
जब एक snapshot test fail होता है, Jest saved snapshot और नए output के बीच एक diff दिखाता है। आपको यह diff पढ़ना होगा और decide करना होगा: यह change intentional था (जिस case में आप snapshot update करें) या एक real bug था (जिस case में आप component fix करें instead)?
उदाहरण: Reading and Updating a Snapshot Diff
$ npx jest
FAIL src/Greeting.test.js
✕ renders a greeting (12 ms)
- Snapshot
+ Received
- <h1>Hello, Guest</h1>
+ <h1>Hello, World</h1>
# after confirming the change is intentional:
$ npx jest -u
PASS src/Greeting.test.js
1 snapshot updated.⚠️ Run this in your own terminal or Node.js environment.
Snapshots कब उपयोग करें (और कब न करें)
Snapshots छोटे, stable components के लिए सबसे अच्छा काम करते हैं जहां कोई भी change meaningful और review करना आसान हो। Large, frequently-changing components के लिए, snapshots huge diffs produce करते हैं जो carefully review करना मुश्किल होते हैं, उन्हें specific behavior के बारे में targeted assertions से कम useful बनाते हुए।
उदाहरण: When to Use (and Avoid) Snapshots
// Run in your local React project (npm install required)
// Good snapshot candidate: small, stable
test('Icon renders', () => {
const { container } = render(<Icon name="star" />);
expect(container).toMatchSnapshot();
});
// Less ideal: a whole complex Dashboard page — prefer targeted assertions there instead- जब भी test fail हो blindly 'update snapshots' run करना, बिना actually check किए कि change intentional था या नहीं।
- Huge, complex component trees को snapshot करना जहां एक tiny unrelated change एक massive, unreadable diff produce करता है।
- एक stale snapshot file commit करना जो अब intentional recent changes से match नहीं करती।
- Snapshot tests rendered output का एक serialized representation save करते हैं और future runs को इसके against compare करते हैं।
- toMatchSnapshot() first run पर snapshot file बनाता है, फिर subsequent runs पर इसके against compare करता है।
- एक failing snapshot test का मतलब है output बदल गया — आपको confirm करना होगा कि वह change intentional था या नहीं।
- Snapshot files को code changes की तरह review किया जाना चाहिए, blindly regenerate नहीं।
npm install jest चाहिए (built-in snapshot support के साथ) — Node में run होता है, इस browser sandbox में नहीं।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: