Testing, debugging and quality assurance for Wix apps

Testing is the difference between an app that gets approved on the first submission and one that bounces back repeatedly with rejection notices. Wix reviewers are thorough, and users are unforgiving of bugs. This lesson covers every testing strategy you need: unit tests, integration tests, Wix test sites, debugging tools, error monitoring and the complete pre-submission quality checklist.

The Testing Pyramid for Wix Apps

A solid testing strategy follows the testing pyramid: many unit tests at the base, fewer integration tests in the middle, and a small number of end-to-end tests at the top. Each layer catches different types of bugs.

• Unit tests (70%): Test individual functions, utilities, data transformations and business logic in isolation
• Integration tests (20%): Test API interactions, database operations and component rendering with mocked Wix SDK
• End-to-end tests (10%): Test complete user flows on actual Wix test sites - install, configure, use, uninstall

Unit Testing App Components and Backend Code

Unit tests verify that individual pieces of your code work correctly in isolation. For Wix CLI apps, use Jest or Vitest for testing React components and backend functions.

// __tests__/seo-audit.test.ts
import { describe, it, expect } from 'vitest';
import { auditProductSeo, calculateSeoScore } from '../src/public/seo-utils';

describe('SEO Audit Functions', () => {
  it('should return 100 for a fully optimised product', () => {
    const product = {
      seoTitle: 'Premium Leather Wallet - Handcrafted Italian Design',
      seoDescription: 'Discover our handcrafted Italian leather wallet. Premium quality, RFID blocking, multiple card slots. Free shipping on orders over $50.',
      images: 3,
      hasAltText: true,
    };

    const result = auditProductSeo(product);
    expect(result.seoScore).toBe(100);
    expect(result.issues).toHaveLength(0);
  });

  it('should flag missing SEO title', () => {
    const product = {
      seoTitle: '',
      seoDescription: 'A valid description that is long enough',
      images: 2,
      hasAltText: true,
    };

    const result = auditProductSeo(product);
    expect(result.seoScore).toBeLessThan(100);
    expect(result.issues).toContain(
      expect.stringContaining('SEO title')
    );
  });

  it('should flag short meta description', () => {
    const product = {
      seoTitle: 'Valid Title for SEO Purposes Here',
      seoDescription: 'Too short',
      images: 1,
      hasAltText: true,
    };

    const result = auditProductSeo(product);
    expect(result.issues).toContain(
      expect.stringContaining('Meta description')
    );
  });

  it('should calculate aggregate score correctly', () => {
    const pages = [
      { score: 80 },
      { score: 60 },
      { score: 100 },
    ];

    expect(calculateSeoScore(pages)).toBe(80);
  });
});

Integration Testing with Wix APIs

Integration tests verify that your code correctly interacts with Wix APIs. Since you cannot call real Wix APIs in a test environment, you mock the SDK and verify your code sends the right requests and handles responses correctly.

• Mock the Wix SDK using Jest/Vitest mock functions for wixData.query, wixData.insert, etc.
• Test that your code handles API error responses gracefully (network errors, permission errors, rate limits)
• Verify that your code correctly transforms Wix API response data into the format your UI expects
• Test pagination logic with mocked responses that simulate multi-page result sets
• Test that your webhooks handler processes event payloads correctly with sample event data from the Wix docs

End-to-End Testing on Wix Test Sites

Complete E2E testing workflow for Wix apps

• Set up a dedicated Wix test site with Wix Stores, Bookings and Blog installed. Populate it with sample data (products, services, blog posts).
• Install your app on the test site using wix dev. Walk through the complete first-time user experience as if you were a new user.
• Test every dashboard page: settings save and load correctly, analytics display data, lists paginate properly.
• Test every site widget: renders correctly on desktop and mobile, responds to configuration changes, handles loading and error states.
• Test the uninstall flow: uninstall the app and verify it cleans up properly. Reinstall and verify settings are restored or reset as expected.
• Test on a published site (not just the editor preview). Some behaviours differ between editor and live site.

Debugging Tools and Strategies

• Browser DevTools: Use the Console, Network and React DevTools tabs to debug dashboard pages and site widgets
• Wix CLI logs: The "wix dev" terminal output shows server-side logs, errors and API call traces
• Wix Developer Centre: Check the app errors tab for production errors reported from installed sites
• Source maps: Enable source maps in your build configuration for readable stack traces in production
• Error boundaries: Wrap React components in error boundaries to catch rendering errors gracefully
• Structured logging: Use a consistent log format (timestamp, level, context, message) for easier debugging

Pre-Submission Quality Checklist (50 Points)

Before submitting your app to the Wix App Market, run through this comprehensive quality checklist. Address every item to maximise your chances of first-time approval.

• Functionality (15 pts): All features work as described, no JavaScript errors in console, all API calls succeed, error states handled
• Performance (10 pts): Dashboard pages load in under 2 seconds, site widgets render in under 1 second, no memory leaks, images optimised
• Responsiveness (10 pts): Dashboard works on 1024px+ screens, widgets work 280px-1200px, no horizontal scroll, touch targets 44px+
• Accessibility (5 pts): Keyboard navigable, screen reader compatible, colour contrast AA compliant, focus indicators visible
• Design quality (5 pts): Uses Wix Design System for dashboard, consistent styling, professional appearance, proper spacing
• Error handling (5 pts): Network errors handled gracefully, loading states shown, empty states designed, user-friendly error messages