neuro-shopify-testing

Implements Vitest unit tests and Playwright E2E tests for Shopify Remix apps.

Updated Apr 18, 2026
One-click install
npx skills add https://github.com/webdevarif/claude-skills --skill neuro-shopify-testing-webdevarif
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: neuro-shopify-testing
Source: https://github.com/webdevarif/claude-skills/tree/main/neuro-shopify-testing
Command: npx skills add https://github.com/webdevarif/claude-skills --skill neuro-shopify-testing-webdevarif

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vitest, @vitejs/plugin-react, vite-tsconfig-paths, jsdom, @testing-library/react, @testing-library/jest-dom, @testing-library/user-event, @remix-run/testing, @playwright/test, @getverdict/mock-bridge, jose, msw.

What problem does it solve? Testing Shopify apps is difficult because loaders, actions, and webhooks depend on Shopify authentication, GraphQL Admin APIs, App Bridge, and HMAC-signed webhooks. This Skill provides exact patterns for mocking these dependencies so you can write reliable unit, component, and end-to-end tests. ## Core Features & Use Cases - Vitest Unit & Component Testing: Mock authenticate.admin, Shopify GraphQL responses, and App Bridge globals, and test Polaris components with a custom AppProvider render wrapper. - Webhook Testing: Simulate HMAC-signed webhook requests, verify invalid signature rejection, idempotent delivery, and mandatory GDPR webhook handling. - Playwright E2E Testing: Run full app flows with JWT-based mock Shopify auth fixtures, redirect interception, and Mock Bridge for embedded app testing. - Use Case: When building a Remix-based Shopify app, use this Skill to scaffold the complete tests/ directory, configure vitest.workspace.ts and playwright.config.ts, and write loader, action, webhook, and E2E tests that run in GitHub Actions CI. ## Quick Start Set up Vitest and Playwright testing for my Shopify Remix app, including mocks for authenticate.admin and a signed webhook test for the orders/create topic.

Frequently Asked Questions about neuro-shopify-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test Shopify Remix loaders and actions with Vitest?

Mock the ~/shopify.server module with vi.mock so authenticate.admin resolves a mock admin GraphQL client and session. Then call the loader or action directly with a constructed Request object and assert on the JSON response and mock call counts.

How to mock authenticate.admin in Shopify app tests?

Use vi.mock on your shopify.server module and return an object where authenticate.admin resolves to mock admin, session, and cors values. Export the mockAdmin so individual tests can set GraphQL responses per test case.

How do I test Shopify webhooks with HMAC signatures?

Build the request body as a JSON string, compute an HMAC-SHA256 digest with your test API secret using Node crypto, and set it in the X-Shopify-Hmac-Sha256 header. Send the request to your webhook action and assert a 200 status, or 401 for invalid signatures.

Can I run Playwright E2E tests against a Shopify embedded app?

Yes, by creating a Playwright fixture that signs a JWT session token with jose using your API secret and injects it as an Authorization header. Intercept redirects to the Shopify admin domain and rewrite them to your local base URL.

How do I test Polaris components with Testing Library?

Wrap your render function in a custom wrapper that provides AppProvider with Polaris locale translations. Export this custom render alongside all Testing Library utilities so every component test has the required Polaris context.

Why does my Shopify webhook test fail with a 401 error?

A 401 means HMAC validation failed, usually because the signature was computed over a parsed object instead of the raw body string, or the wrong secret was used. Sign the exact JSON string you send and use the same secret your app reads from the environment.