fix flaky tests

Author: KurtGokhan

examples/vite/src/App.tsx

@@ -8,7 +8,9 @@ import { HttpQueryBuilder } from 'react-query-builder';
 import { queryClient } from './client';
 import './index.css';
 
-await setupWorker(...getMockHandlers()).start({
+const isTest = import.meta.env.MODE === 'test';
+
+await setupWorker(...getMockHandlers(!isTest)).start({
   onUnhandledRequest: 'bypass',
   quiet: true,
 });

examples/vite/src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vitest/importMeta" />

examples/vite/tests/Render.test.tsx

@@ -2,9 +2,11 @@ import { baseUrl } from 'react-query-builder-example-mocks';
 import { expect, test } from 'vitest';
 import { render } from 'vitest-browser-react';
 import { App } from '../src/App';
+import { queryClient } from '../src/client';
 
 beforeEach(async () => {
   await fetch(`${baseUrl}/reset`, { method: 'POST' });
+  queryClient.clear();
 });
 
 test('Renders the app', async () => {
@@ -45,7 +47,7 @@ test('Deletes posts immediately on clicking delete button', async () => {
   await expect.element(el).not.toBeInTheDocument();
 });
 
-test('Deletes deletes but reverts the deletion after server fails', async () => {
+test('Deletes the post but reverts the deletion after server fails', async () => {
   const { getByText } = render(<App />);
 
   const el = getByText('0 - Exploring the Future of AI');

packages/example-mocks/src/mocks.ts

@@ -23,8 +23,9 @@ function createMockData() {
   return { users, posts, comments };
 }
 
-export function getMockHandlers() {
+export function getMockHandlers(withLocalStorage = true) {
   function saveMockData(saveData = { users, posts, comments }) {
+    if (!withLocalStorage) return;
     localStorage.setItem('mockData', JSON.stringify(saveData));
   }
 
@@ -35,11 +36,13 @@ export function getMockHandlers() {
   }
 
   function getMockData() {
-    const ls = localStorage.getItem('mockData');
     try {
-      if (ls) {
-        const data = JSON.parse(ls);
-        if (data.users && data.posts && data.comments) return data as ReturnType<typeof createMockData>;
+      if (withLocalStorage) {
+        const ls = localStorage.getItem('mockData');
+        if (ls) {
+          const data = JSON.parse(ls);
+          if (data.users && data.posts && data.comments) return data as ReturnType<typeof createMockData>;
+        }
       }
     } catch (e) {}