Snapshot testing queries in GraphQL - Step-by-Step Execution

Concept Flow - Snapshot testing queries

Write GraphQL Query

↓

Run Query Against API

↓

Capture Response Snapshot

↓

Compare New Response to Snapshot

↓

Test Pass

This flow shows how a GraphQL query is run, its response saved as a snapshot, and future runs compare responses to detect changes.

Execution Sample

GraphQL

query GetUser {
  user(id: "1") {
    id
    name
    email
  }
}

This GraphQL query fetches user details by ID to create or verify a snapshot of the response.

Execution Table

Step	Action	Query/Response	Snapshot State	Test Result
1	Write Query	query GetUser { user(id: "1") { id name email } }	No snapshot yet	N/A
2	Run Query	Sent to API	No snapshot yet	N/A
3	Capture Response	{ user: { id: "1", name: "Alice", email: "[e-mail]" } }	Snapshot created	N/A
4	Run Query Again	Sent to API	Snapshot exists	N/A
5	Compare Response	{ user: { id: "1", name: "Alice", email: "[e-mail]" } }	Matches snapshot	Pass
6	Run Query Again	Sent to API	Snapshot exists	N/A
7	Compare Response	{ user: { id: "1", name: "Alice", email: "[e-mail]" } }	Differs from snapshot	Fail

💡 Test stops after detecting a mismatch or confirming match with snapshot.

Variable Tracker

Variable	Start	After Step 3	After Step 5	After Step 7
snapshot	null	{ user: { id: "1", name: "Alice", email: "[e-mail]" } }	Same as step 3	Same as step 3
response	null	{ user: { id: "1", name: "Alice", email: "[e-mail]" } }	{ user: { id: "1", name: "Alice", email: "[e-mail]" } }	{ user: { id: "1", name: "Alice", email: "[e-mail]" } }
testResult	N/A	N/A	Pass	Fail

Key Moments - 2 Insights

Why does the test fail even if only the email changed?

Because snapshot testing compares the entire response exactly, any difference like email change causes a mismatch (see execution_table row 7).

What happens if there is no existing snapshot?

The first run captures and saves the response as a snapshot (see execution_table row 3), so future tests have a baseline to compare.

Visual Quiz - 3 Questions

Look at the execution_table, what is the test result at step 5?

A No snapshot

B Fail

C Pass

D Test not run

💡 Hint

Check the 'Test Result' column at step 5 in the execution_table.

At which step does the snapshot get created?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Look for 'Snapshot created' in the 'Snapshot State' column.

If the response changes, what happens to the test result?

A It passes

B It fails

C Snapshot updates automatically

D Test is skipped

💡 Hint

See step 7 in execution_table where response differs and test result is 'Fail'.

Concept Snapshot

Snapshot Testing Queries:
- Write a GraphQL query.
- Run query and capture response as snapshot.
- On future runs, compare response to snapshot.
- If identical, test passes.
- If different, test fails and needs review.

Full Transcript

Snapshot testing queries involves writing a GraphQL query and running it against an API. The first time, the response is saved as a snapshot. Later runs compare the new response to this snapshot. If they match exactly, the test passes. If there is any difference, such as a changed email, the test fails. This helps catch unexpected changes in API responses.

Practice

1. What is the main purpose of snapshot testing in GraphQL queries?

easy

A. To improve the speed of GraphQL queries

B. To generate new GraphQL schemas

C. To detect unexpected changes in query results automatically

D. To optimize database indexing

Solution

1. Step 1: Understand snapshot testing concept

   Snapshot testing captures the output of a query at a point in time to compare later.

2. Step 2: Identify the purpose in GraphQL context

   It helps catch unexpected changes in the query results automatically during tests.

3. Final Answer:

   To detect unexpected changes in query results automatically -> Option C

4. Quick Check:

   Snapshot testing = detect changes automatically [OK]

Hint: Snapshot testing checks if query results change unexpectedly [OK]

Common Mistakes:

• Thinking snapshot testing speeds up queries
• Confusing snapshot testing with schema generation
• Assuming it optimizes database indexes

2. Which of the following is the correct syntax to write a simple GraphQL query for snapshot testing user names and emails?

easy

A. query { users name email }

B. query users { name, email }

C. { users: name, email }

D. query { users { name, email } }

Solution

1. Step 1: Recall GraphQL query syntax

   A valid query starts with 'query' keyword, then braces with fields selected properly.

2. Step 2: Check each option's syntax

   query { users { name, email } } correctly uses 'query { users { name, email } }' with nested braces for fields.

3. Final Answer:

   query { users { name, email } } -> Option D

4. Quick Check:

   Correct GraphQL query syntax = query { users { name, email } } [OK]

Hint: GraphQL queries need nested braces for fields inside objects [OK]

Common Mistakes:

• Missing braces around fields
• Incorrect use of colon or commas
• Omitting 'query' keyword or braces

3. Given this GraphQL query for snapshot testing:
query { posts { id title author { name } } }
What will be the shape of the returned JSON data?

medium

A. {"data":{"posts":[{"id":1,"title":"Hello","author":{"name":"Alice"}}]}}

B. {"posts":[{"id":1,"title":"Hello","author":{"name":"Alice"}}]}

C. {"data":{"posts":{"id":1,"title":"Hello","author":{"name":"Alice"}}}}

D. {"data":{"posts":[{"id":1,"title":"Hello","author":"Alice"}]}}

Solution

1. Step 1: Understand GraphQL response format

   GraphQL responses wrap results inside a 'data' object, with arrays for list fields.

2. Step 2: Analyze the query structure

   'posts' is a list, so its value is an array of objects with 'id', 'title', and nested 'author' object.

3. Final Answer:

   {"data":{"posts":[{"id":1,"title":"Hello","author":{"name":"Alice"}}]}} -> Option A

4. Quick Check:

   GraphQL response = data object with arrays for lists [OK]

Hint: GraphQL responses always wrap data inside a 'data' field [OK]

Common Mistakes:

• Omitting the 'data' wrapper
• Using object instead of array for list fields
• Flattening nested objects incorrectly

4. You wrote this snapshot test query:
query { user { id name email } }
But the test fails with an error: "Cannot query field 'user' on type 'Query'".
What is the most likely cause?

medium

A. The schema does not have a 'user' field on the root Query type

B. The query is missing the 'query' keyword

C. The fields inside 'user' are invalid

D. Snapshot testing does not support nested fields

Solution

1. Step 1: Interpret the error message

   The error says 'user' field is not found on the root Query type in the schema.

2. Step 2: Check query syntax and schema

   The query syntax is valid, so the problem is likely the schema missing 'user' field.

3. Final Answer:

   The schema does not have a 'user' field on the root Query type -> Option A

4. Quick Check:

   Field missing in schema = The schema does not have a 'user' field on the root Query type [OK]

Hint: Check schema fields if query field causes 'Cannot query field' error [OK]

Common Mistakes:

• Assuming missing 'query' keyword causes this error
• Blaming nested fields without schema check
• Thinking snapshot testing limits field nesting

5. You want to create a snapshot test for a GraphQL query that fetches a list of products with their id, name, and price, but only for products priced above $50.
Which query correctly applies this filter for snapshot testing?

hard

A. query { products(filter: { price: { gt: 50 } }) { id name price } }

B. query { products(filter: { price_gt: 50 }) { id name price } }

C. query { products { id name price if price > 50 } }

D. query { products { id name price where price > 50 } }

Solution

1. Step 1: Understand GraphQL filtering syntax

   Filters are usually passed as arguments with field names and operators like 'price_gt' for greater than.

2. Step 2: Evaluate each option's filter usage

   query { products(filter: { price_gt: 50 }) { id name price } } uses 'filter: { price_gt: 50 }' which is a common and correct pattern.

3. Final Answer:

   query { products(filter: { price_gt: 50 }) { id name price } } -> Option B

4. Quick Check:

   Use filter arguments with operator suffixes like _gt [OK]

Hint: Use filter arguments with _gt for greater than in GraphQL [OK]

Common Mistakes:

• Placing conditions inside selection sets
• Using invalid keywords like 'where' or 'if' inside query
• Incorrect nested filter object structure