Questions about testing React hooks with the react-hooks-testing-library utility.
Questions tagged [react-hooks-testing-library]
90 questions
1
vote
1 answer
How can i query the result of the hook response?
Is it possible to query the DOM that is returned by when the hook is rendered?
const {current} = renderHook(...)
current.querySelector('xxx')
tpee
- 881
- 8
- 7
1
vote
1 answer
Test react hooks state using Jest and React Hooks Library
I nav component then will toggle state in a sidebar as well as open and close a menu and then trying to get this pass in code coverage. When I log inside my test my state keeps showing up as undefined. Not sure how to tackle this one…
user992731
- 3,400
- 9
- 53
- 83
1
vote
1 answer
Where should I use act when testing an async react hook?
When testing an async react hook with @testing-library/react-hooks I see an error message. The error message mentions wrapping code in act(...) but I'm not sure where I should do this.
I have tried to wrap parts of the code in act(...) but each…
Edgar Friendly
- 41
- 1
- 1
- 5
1
vote
1 answer
How to hook with useEffect/setState
I'm having trouble making the following test pass:
import { useEffect, useState } from "react";
export function useComponentResources(required) {
const [componentResources, setComponentResources] = useState(null);
useEffect(() => {
if…
epignosisx
- 6,152
- 2
- 30
- 31
1
vote
2 answers
How to Test Custom Hook with react testing library
I tried using react-hooks-testing-library but it dosn't seem how handle hooks that use useContext.
import React,{useContext} from 'react'
import {AuthContextData} from '../../AuthContext/AuthContext'
const useAuthContext = () => {
const…
Ktr1000
- 253
- 5
- 17
0
votes
2 answers
How can I test two different GET queries in the same React custom hook using react testing library and react-hooks?
I'm using a custom react hook to perform two GET operations using react query. The API is in a separate module and uses both getTestByUid() and getTestStatuses() inside useQuery.
// TestHook.js
import { useQuery } from "react-query"
export const…
Tony96
- 31
- 1
- 5
0
votes
0 answers
How to test this window resize hook?
I've created a widget component that can be embedded on a webapp as a script. It is not embedded in an IFrame therefore lives inside the webapp's window object. This embedded component is responsive and applies different margin classes(tailwind)…
glengomerson
- 41
- 6
0
votes
0 answers
How can I test useEffect with async function in Jest?
I have this function inside a helper:
export const useDAMProductImages = (imageId: string) => {
const {
app: { baseImgDomain },
} = getConfig();
const response: MutableRefObject = useRef([]);
useEffect(() => {
const…
BlackWhite
- 814
- 2
- 12
- 26
0
votes
0 answers
Testing a custom hook not getting updated
Trying to test a status hook that uses a promise that is not getting updated by my test.
screens.OnStart() should trigger setStatus with the value the promise returns.
When I log status it never changes.
import { useEffect, useState } from…
me-me
- 5,139
- 13
- 50
- 91
0
votes
0 answers
result.current.data is undefined when I declare renderHook into the test closure but works when it is defined outside of it
I'm trying to test a custom hook but for some reason I can't render the hook inside the test closure "it".
This code works (I must use the rerender methods otherwise the result.current.data remains undefined) :
describe('useGet hook', () => {
…
jeyremd
- 179
- 1
- 13
0
votes
0 answers
Why does this test code fail (It works in the application) - using testing-library/react-hooks
I'm having trouble writing test code for this application. Specifically, the code works in the app - it works exactly the way I want it to. But with all the crazy mocks and abstractions in the codebase I have to work with, for some reason the…
Kerry Ann Boyko
- 11
- 1
0
votes
0 answers
renderHook in context wrapper function only works when at the top of imports
So I sort of found a fix for this, but I want to understand what's happening and why.
The background is that I'm testing some classes, each class has a field for the result of a hook for reasons that aren't relevant here. All that happens with the…
S S
- 53
- 4
0
votes
0 answers
Vitest + MSW - Runtime request handler is not working
I'm trying to migrate the test framework of my app from Jest to Vitest (for multiple reasons) and I encounter an issue.
With Jest, I was using runtime request handlers at multiple places of my app to control that I have the correct behavior/output…
Yomansk8
- 233
- 4
- 15
0
votes
0 answers
Test custom react hooks for promise reject with testing library react hooks
I have a custom react hook, just to make a GET request with axios, and
the file named as: useAxiosGet.ts,
and the code is:
import {useMemo, useState} from "react";
import axios, {AxiosResponse} from "axios";
interface ErrorBody {
code: string,
…
MengQiu Peng
- 1
- 1
0
votes
2 answers
not able to install react-google-login
Trying to install "react-google-login" by using the command
npm install react-google-login.
It gives the following error :
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving:…
Prajwal Raj
- 43
- 4