Questions about testing React hooks with the react-hooks-testing-library utility.
Questions tagged [react-hooks-testing-library]
90 questions
43
votes
10 answers
How to set initial state for useState Hook in jest and enzyme?
Currently Im using functional component with react hooks. But I'm unable to test the useState hook completely. Consider a scenario like, in useEffect hook I'm doing an API call and setting value in the useState. For jest/enzyme I have mocked data to…
Srigar
- 1,648
- 3
- 14
- 28
19
votes
1 answer
How to test custom async/await hook with react-hooks-testing-library
I created a custom react hook that is supposed to handle all less important api requests, which i don't want to store in the redux state. Hook works fine but I have trouble testing it. My test setup is jest and enzyme, but I decided to give a try…
Dan Zawadzki
- 682
- 2
- 8
- 28
14
votes
2 answers
@testing-library/react-hooks Warning: It looks like you're using the wrong act() around your test interactions
I have quite complex and still growing application. We use react with hooks, context and other useful stuff. In general, testing react hooks with @testing-library/react-hooks is easy. Just from time to time we have a situation when tests pass but…
Kania
- 2,342
- 4
- 28
- 36
11
votes
1 answer
How test a component using the useReducer hook?
Reducer
// src/reducers/FooReducer.js
export function FooReducer(state, action) {
switch (action.type) {
case 'update': {
return action.newState;
}
// ... other actions
default:
throw new Error('Unknown action type');
…
Sebastien De Varennes
- 675
- 2
- 7
- 28
11
votes
3 answers
Using react-hooks-testing-library with jest.spyOn - spy is not called
I am having an issue setting up a unit test to determine that a function is called with the correct arguments. useAHook returns function foo which calls function bar. The code looks like this
//myModule.js
export const useAHook = (arg1, arg2) => {
…
Scott
- 422
- 1
- 4
- 17
10
votes
1 answer
React Hooks - How to test changes on global providers
I'm trying to test the following scenario:
A user with an expired token tries to access a resource he is not authorized
The resources returns a 401 error
The application updates a global state "isExpiredSession" to true
For this, I have 2…
dfranca
- 5,156
- 2
- 32
- 60
8
votes
1 answer
When to use waitForNextUpdate rather than act + jest.advanceTimersByTime?
There is an example on advanced-hooks#async doc.
I am confused about how does waitForNextUpdate works. I made two test cases to compare waitForNextUpdate and act() + jest.advanceTimersByTime().
index.ts:
import { useState, useCallback } from…
Lin Du
- 88,126
- 95
- 281
- 483
6
votes
2 answers
how to test a react hook that can have a ref of an html element passed to it
I have a custom hook that can have an optional ref passed to it as a property of an object that the hook takes as an argument:
export const useShortcuts = ({ ref }) => {
useEffect(() => {
const trapper = new mousetrap(ref.current);
The code…
dagda1
- 26,856
- 59
- 237
- 450
6
votes
1 answer
How to test hooks with two useEffect statements?
I have the following hook :
const useBar = () => {
const [myFoo, setFoo] = useState(0);
const [myBar, setBar] = useState(0);
useEffect(() => {
setFoo(myFoo + 1);
console.log("setting foo (1)", myFoo, myBar);
}, [setFoo, myFoo,…
drinchev
- 19,201
- 4
- 67
- 93
5
votes
1 answer
Why do I see the warning about using act when testing this hook?
I'm having trouble understanding how to write a test for a hook without the following warning when using renderHook from "@testing-library/react-hooks".
"Warning: An update to TestHook inside a test was not wrapped in act(...)."
Basically the hook…
Jonathan Goodman
- 371
- 3
- 9
5
votes
1 answer
Testing a custom context hook that uses a useEffect hook and apollo
I have created a context that exposes a hook for ease of use.
Within this hook i already make sure that some data is preloaded before rendering the page, like this:
export const MyContext = React.createContext({} as any);
function useMyContext()…
Maxim
- 3,836
- 6
- 42
- 64
5
votes
1 answer
Why is re-run only updating props one time with react-hooks-testing-libary?
I have a hook with useEffect. I noticed that useEffect is not being run more than twice because after one rerender call with different data, subsequent calls do not get the updated data.
export default function(lookForUsername) {
const…
Dave Stein
- 8,653
- 13
- 56
- 104
4
votes
1 answer
Testing return value of a custom hook
I am trying to write a test suit for this custom hook.
export const useInitialMount = () => {
const isFirstRender = useRef(true);
// in the very first render the ref is true, but we immediately change it to false.
// so the every renders…
morteza
- 718
- 1
- 9
- 14
4
votes
1 answer
Testing a fetch.catch in custom hook
I've got this custom hook:
import React from 'react';
import { useMessageError } from 'components/Message/UseMessage';
export interface Country {
code: string;
name: string;
}
export default function useCountry(): Array {
const…
Jazi
- 6,569
- 13
- 60
- 92
4
votes
2 answers
Testing a custom hook with renderHook
I want to test a custom hook which was implemented as an helping function for code reuse with other hooks. It's calling useDispatch and useSelector in its implementation, along with saving data in the session storage:
export function…
CodeMonkey
- 11,196
- 30
- 112
- 203