test(svelte-query/useMutationState): simplify 'queryFn' and replace 'queryByText' with 'getByText'

Author: sukvvon

packages/svelte-query/tests/useMutationState/BaseExample.svelte

@@ -28,9 +28,5 @@
   {JSON.stringify(statuses)}
 </div>
 
-<button data-testid="success" on:click={() => $successMutation.mutate()}>
-  Click
-</button>
-<button data-testid="error" on:click={() => $errorMutation.mutate()}>
-  Click
-</button>
+<button on:click={() => $successMutation.mutate()}>success</button>
+<button on:click={() => $errorMutation.mutate()}>error</button>

packages/svelte-query/tests/useMutationState/useMutationState.test.ts

@@ -1,5 +1,6 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { fireEvent, render } from '@testing-library/svelte'
+import { sleep } from '@tanstack/query-test-utils'
 import BaseExample from './BaseExample.svelte'
 
 describe('useMutationState', () => {
@@ -12,10 +13,12 @@ describe('useMutationState', () => {
   })
 
   test('Run few mutation functions and check from useMutationState', async () => {
-    const successMutationFn = vi.fn()
-    const errorMutationFn = vi.fn().mockImplementation(() => {
-      throw 'error'
-    })
+    const successMutationFn = vi.fn(() => sleep(10).then(() => 'data'))
+    const errorMutationFn = vi
+      .fn()
+      .mockImplementation(() =>
+        sleep(20).then(() => Promise.reject(new Error('error'))),
+      )
 
     const rendered = render(BaseExample, {
       props: {
@@ -31,24 +34,24 @@ describe('useMutationState', () => {
       },
     })
 
-    fireEvent.click(rendered.getByTestId('success'))
-    await vi.advanceTimersByTimeAsync(0)
+    fireEvent.click(rendered.getByText('success'))
+    await vi.advanceTimersByTimeAsync(11)
     expect(successMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByTestId('result').innerHTML).toEqual('["success"]')
+    expect(rendered.getByText('["success"]')).toBeInTheDocument()
 
-    fireEvent.click(rendered.getByTestId('error'))
-    await vi.advanceTimersByTimeAsync(0)
+    fireEvent.click(rendered.getByText('error'))
+    await vi.advanceTimersByTimeAsync(21)
     expect(errorMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByTestId('result').innerHTML).toEqual(
-      '["success","error"]',
-    )
+    expect(rendered.getByText('["success","error"]')).toBeInTheDocument()
   })
 
   test('Can select specific type of mutation ( i.e: error only )', async () => {
-    const successMutationFn = vi.fn()
-    const errorMutationFn = vi.fn().mockImplementation(() => {
-      throw 'error'
-    })
+    const successMutationFn = vi.fn(() => sleep(10).then(() => 'data'))
+    const errorMutationFn = vi
+      .fn()
+      .mockImplementation(() =>
+        sleep(20).then(() => Promise.reject(new Error('error'))),
+      )
 
     const rendered = render(BaseExample, {
       props: {
@@ -68,22 +71,24 @@ describe('useMutationState', () => {
       },
     })
 
-    fireEvent.click(rendered.getByTestId('success'))
-    await vi.advanceTimersByTimeAsync(0)
+    fireEvent.click(rendered.getByText('success'))
+    await vi.advanceTimersByTimeAsync(11)
     expect(successMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByTestId('result').innerHTML).toEqual('[]')
+    expect(rendered.getByText('[]')).toBeInTheDocument()
 
-    fireEvent.click(rendered.getByTestId('error'))
-    await vi.advanceTimersByTimeAsync(0)
+    fireEvent.click(rendered.getByText('error'))
+    await vi.advanceTimersByTimeAsync(21)
     expect(errorMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByTestId('result').innerHTML).toEqual('["error"]')
+    expect(rendered.getByText('["error"]')).toBeInTheDocument()
   })
 
   test('Can select specific mutation using mutation key', async () => {
-    const successMutationFn = vi.fn()
-    const errorMutationFn = vi.fn().mockImplementation(() => {
-      throw 'error'
-    })
+    const successMutationFn = vi.fn(() => sleep(10).then(() => 'data'))
+    const errorMutationFn = vi
+      .fn()
+      .mockImplementation(() =>
+        sleep(20).then(() => Promise.reject(new Error('error'))),
+      )
 
     const rendered = render(BaseExample, {
       props: {
@@ -103,14 +108,14 @@ describe('useMutationState', () => {
       },
     })
 
-    fireEvent.click(rendered.getByTestId('success'))
-    await vi.advanceTimersByTimeAsync(0)
+    fireEvent.click(rendered.getByText('success'))
+    await vi.advanceTimersByTimeAsync(11)
     expect(successMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByTestId('result').innerHTML).toEqual('["success"]')
+    expect(rendered.getByText('["success"]')).toBeInTheDocument()
 
-    fireEvent.click(rendered.getByTestId('error'))
-    await vi.advanceTimersByTimeAsync(0)
+    fireEvent.click(rendered.getByText('error'))
+    await vi.advanceTimersByTimeAsync(21)
     expect(errorMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByTestId('result').innerHTML).toEqual('["success"]')
+    expect(rendered.getByText('["success"]')).toBeInTheDocument()
   })
 })