Skip to content

Commit cd89d6f

Browse files
test({react,preact}-query/useMutation): add conditional handling and retry tests using 'mutate' callbacks (#10491)
* test({react,preact}-query/useMutation): add conditional handling and retry tests using 'mutate' callbacks * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 6e15fe6 commit cd89d6f

2 files changed

Lines changed: 218 additions & 0 deletions

File tree

packages/preact-query/src/__tests__/useMutation.test.tsx

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1979,4 +1979,113 @@ describe('useMutation', () => {
19791979
rendered.getByText('result: error: create failed'),
19801980
).toBeInTheDocument()
19811981
})
1982+
1983+
it('should handle conditional logic based on mutate success or failure', async () => {
1984+
function Page() {
1985+
const [message, setMessage] = useState<string>('idle')
1986+
1987+
const submitMutation = useMutation({
1988+
mutationFn: async (shouldFail: boolean) => {
1989+
await sleep(10)
1990+
if (shouldFail) {
1991+
throw new Error('submission failed')
1992+
}
1993+
return 'submitted successfully'
1994+
},
1995+
retry: false,
1996+
})
1997+
1998+
return (
1999+
<div>
2000+
<button
2001+
onClick={() =>
2002+
submitMutation.mutate(false, {
2003+
onSuccess: (result) => setMessage(`success: ${result}`),
2004+
onError: (error) => setMessage(`error: ${error.message}`),
2005+
})
2006+
}
2007+
>
2008+
submit
2009+
</button>
2010+
<button
2011+
onClick={() =>
2012+
submitMutation.mutate(true, {
2013+
onSuccess: (result) => setMessage(`success: ${result}`),
2014+
onError: (error) => setMessage(`error: ${error.message}`),
2015+
})
2016+
}
2017+
>
2018+
submit fail
2019+
</button>
2020+
<div>message: {message}</div>
2021+
</div>
2022+
)
2023+
}
2024+
2025+
const rendered = renderWithClient(queryClient, <Page />)
2026+
2027+
fireEvent.click(rendered.getByRole('button', { name: /^submit$/i }))
2028+
await vi.advanceTimersByTimeAsync(11)
2029+
2030+
expect(
2031+
rendered.getByText('message: success: submitted successfully'),
2032+
).toBeInTheDocument()
2033+
2034+
fireEvent.click(rendered.getByRole('button', { name: /submit fail/i }))
2035+
await vi.advanceTimersByTimeAsync(11)
2036+
2037+
expect(
2038+
rendered.getByText('message: error: submission failed'),
2039+
).toBeInTheDocument()
2040+
})
2041+
2042+
it('should handle conditional error with retry using mutate', async () => {
2043+
let attempt = 0
2044+
2045+
function Page() {
2046+
const [message, setMessage] = useState<string>('idle')
2047+
2048+
const submitMutation = useMutation({
2049+
mutationFn: async () => {
2050+
await sleep(10)
2051+
attempt++
2052+
if (attempt < 2) {
2053+
throw new Error('temporary failure')
2054+
}
2055+
return 'success'
2056+
},
2057+
retry: false,
2058+
})
2059+
2060+
return (
2061+
<div>
2062+
<button
2063+
onClick={() =>
2064+
submitMutation.mutate(undefined, {
2065+
onSuccess: (result) => setMessage(`result: ${result}`),
2066+
onError: () => setMessage('failed, retrying...'),
2067+
})
2068+
}
2069+
>
2070+
submit
2071+
</button>
2072+
<div>message: {message}</div>
2073+
</div>
2074+
)
2075+
}
2076+
2077+
const rendered = renderWithClient(queryClient, <Page />)
2078+
2079+
fireEvent.click(rendered.getByRole('button', { name: /submit/i }))
2080+
await vi.advanceTimersByTimeAsync(11)
2081+
2082+
expect(
2083+
rendered.getByText('message: failed, retrying...'),
2084+
).toBeInTheDocument()
2085+
2086+
fireEvent.click(rendered.getByRole('button', { name: /submit/i }))
2087+
await vi.advanceTimersByTimeAsync(11)
2088+
2089+
expect(rendered.getByText('message: result: success')).toBeInTheDocument()
2090+
})
19822091
})

packages/react-query/src/__tests__/useMutation.test.tsx

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1978,4 +1978,113 @@ describe('useMutation', () => {
19781978
rendered.getByText('result: error: create failed'),
19791979
).toBeInTheDocument()
19801980
})
1981+
1982+
it('should handle conditional logic based on mutate success or failure', async () => {
1983+
function Page() {
1984+
const [message, setMessage] = React.useState<string>('idle')
1985+
1986+
const submitMutation = useMutation({
1987+
mutationFn: async (shouldFail: boolean) => {
1988+
await sleep(10)
1989+
if (shouldFail) {
1990+
throw new Error('submission failed')
1991+
}
1992+
return 'submitted successfully'
1993+
},
1994+
retry: false,
1995+
})
1996+
1997+
return (
1998+
<div>
1999+
<button
2000+
onClick={() =>
2001+
submitMutation.mutate(false, {
2002+
onSuccess: (result) => setMessage(`success: ${result}`),
2003+
onError: (error) => setMessage(`error: ${error.message}`),
2004+
})
2005+
}
2006+
>
2007+
submit
2008+
</button>
2009+
<button
2010+
onClick={() =>
2011+
submitMutation.mutate(true, {
2012+
onSuccess: (result) => setMessage(`success: ${result}`),
2013+
onError: (error) => setMessage(`error: ${error.message}`),
2014+
})
2015+
}
2016+
>
2017+
submit fail
2018+
</button>
2019+
<div>message: {message}</div>
2020+
</div>
2021+
)
2022+
}
2023+
2024+
const rendered = renderWithClient(queryClient, <Page />)
2025+
2026+
fireEvent.click(rendered.getByRole('button', { name: /^submit$/i }))
2027+
await vi.advanceTimersByTimeAsync(11)
2028+
2029+
expect(
2030+
rendered.getByText('message: success: submitted successfully'),
2031+
).toBeInTheDocument()
2032+
2033+
fireEvent.click(rendered.getByRole('button', { name: /submit fail/i }))
2034+
await vi.advanceTimersByTimeAsync(11)
2035+
2036+
expect(
2037+
rendered.getByText('message: error: submission failed'),
2038+
).toBeInTheDocument()
2039+
})
2040+
2041+
it('should handle conditional error with retry using mutate', async () => {
2042+
let attempt = 0
2043+
2044+
function Page() {
2045+
const [message, setMessage] = React.useState<string>('idle')
2046+
2047+
const submitMutation = useMutation({
2048+
mutationFn: async () => {
2049+
await sleep(10)
2050+
attempt++
2051+
if (attempt < 2) {
2052+
throw new Error('temporary failure')
2053+
}
2054+
return 'success'
2055+
},
2056+
retry: false,
2057+
})
2058+
2059+
return (
2060+
<div>
2061+
<button
2062+
onClick={() =>
2063+
submitMutation.mutate(undefined, {
2064+
onSuccess: (result) => setMessage(`result: ${result}`),
2065+
onError: () => setMessage('failed, retrying...'),
2066+
})
2067+
}
2068+
>
2069+
submit
2070+
</button>
2071+
<div>message: {message}</div>
2072+
</div>
2073+
)
2074+
}
2075+
2076+
const rendered = renderWithClient(queryClient, <Page />)
2077+
2078+
fireEvent.click(rendered.getByRole('button', { name: /submit/i }))
2079+
await vi.advanceTimersByTimeAsync(11)
2080+
2081+
expect(
2082+
rendered.getByText('message: failed, retrying...'),
2083+
).toBeInTheDocument()
2084+
2085+
fireEvent.click(rendered.getByRole('button', { name: /submit/i }))
2086+
await vi.advanceTimersByTimeAsync(11)
2087+
2088+
expect(rendered.getByText('message: result: success')).toBeInTheDocument()
2089+
})
19812090
})

0 commit comments

Comments
 (0)