Snapshot testing queries in GraphQL - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is snapshot testing in the context of GraphQL queries?

Snapshot testing is a way to save the output of a GraphQL query and compare future query results against this saved snapshot to detect unexpected changes.

beginner

Why is snapshot testing useful for GraphQL queries?

It helps catch changes in query results early, ensuring that updates to the backend or schema do not break the expected data structure or content.

intermediate

How do you create a snapshot test for a GraphQL query?

You run the query once, save the result as a snapshot file, and then in future tests, compare the query result to this saved snapshot automatically.

intermediate

What happens if a GraphQL query result changes and does not match the snapshot?

The test fails, alerting you that the query output has changed. You can then review if the change is expected and update the snapshot or fix the issue.

beginner

Name a common tool or library used for snapshot testing GraphQL queries.

Jest is a popular testing framework that supports snapshot testing, including for GraphQL query results.

What does snapshot testing primarily compare in GraphQL?

A The query result to a saved snapshot

B The query syntax to a template

C The query execution time

D The number of fields in the query

Snapshot testing compares the actual query result to a previously saved snapshot to detect changes.

If a snapshot test fails, what should you do first?

A Review the changes to see if they are expected

B Delete the snapshot file

C Ignore the failure

D Rewrite the query

You should review the changes to confirm if they are intentional before updating the snapshot or fixing issues.

Which testing framework is commonly used for snapshot testing GraphQL queries?

A Mocha

B Chai

C Jest

D Cypress

Jest supports snapshot testing natively and is widely used with GraphQL.

Snapshot testing helps to detect what kind of changes in GraphQL queries?

A Changes in query execution speed

B Changes in server hardware

C Changes in query syntax errors

D Changes in query result structure or data

Snapshot testing detects changes in the structure or content of the query result.

When is a snapshot created during testing?

A Before running any queries

B After running the query for the first time

C Only when tests fail

D After every test run

The snapshot is created after the first successful query run to save the expected output.

Explain how snapshot testing works for GraphQL queries and why it is helpful.

Think about saving and comparing query results over time.

Describe the steps you take when a snapshot test for a GraphQL query fails.

Consider how to handle differences between current and saved results.

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