score:3
react hooks are pieces of code that can be reused inside react components. the fact that you're using a hook inside a test is not allowed because that test is not a react component. what you can do is create a wrapper component just for the test that does that:
test('the user can see the closed text after the toggle has been clicked', async () => {
const wrapper = () => {
const [open, setopen] = usestate<boolean>(false); // you can do this inside the wrapper component
return <toggle value={open} setvalue={setopen} ontext='open' offtext='closed' />
};
render(<wrapper />);
fireevent.click(screen.getbytestid('click'));
expect(await screen.querybytext('closed')).tobevisible();
});
this test could add more value if the parent component is tested, because in reality, what you're testing here is that a component executes a callback (in your case setvalue
) and that shows certain value, but the logic inside changing that value is not being tested per se.
Source: stackoverflow.com
Related Query
- React Testing Library: How to test a component that requires the useState hook from its parent?
- How to create a test for a screen that uses the same hook several times? React Testing Library
- React testing library + Jest: How to test a component that receives a number then format it
- How to test the value of the props of react component rendered using react testing library
- How to test button that on click renders html element within the same component in React testing library, Jest?
- How to test a className with the Jest and React testing library
- How to TEST async calls made in componentDidMount that set the state of React Component
- How to test Material UI Select Component with React Testing Library
- how can I test if useState hook has been called with jest and react testing library?
- how to output current rendered component in react testing library unit test
- How can i write a test using React Testing Library to check if hover changes the components style?
- How do I test a React component that calls a function on its parent, which changes props on the component?
- How to Unit test the rendering of a child component in the parent component using react testing library?
- How to test a function inside React functional component using jest.spyOn with React Testing Library
- How to test this component with react testing library - just a starter with this new testing library
- how to test button that call submit form using jest and react testing library
- How to Test Custom Hook with react testing library
- How can I test react component that fetches the data from firestore?
- How to test react component with onClick function Jest/React testing library
- How to test the child component render text after the button on the parent component click with react testing library?
- How to render a conditional component in a Test file? React Testing Library
- How to mock a nested component import in react js and test using react testing library
- How to test React component that uses React Hooks useHistory hook with Enzyme?
- How to test react component with hooks using react testing library
- how to test component while passing boolean value with react testing library and jest
- Jest + React Testing Library: how do I mock out a method from some library that only affects one test block
- How to test for the string '...loading' in React component that uses styled-components?
- How to test a react component that is dependent on useContext hook?
- How do I wrap a React component that returns multiple table rows and avoid the "<tr> cannot appear as a child of <div>" error?
- Figuring out how to mock the window size changing for a react component test
More Query from same tag
- How can I pass data from express server to react views?
- typescript react, dynamic props based on a certain prop value?
- How to use Chessboard.js with Reactjs?
- do not extend React.Component
- How to get data from async request in reactjs and add it to React-bootstrap Modal
- Map state to props not updating after Redux
- Stop propagation of all events
- State not changing - onClick react hooks
- Filtering an array of objects with a button
- Can't Use Context API while making a tree
- props-dependent Switch color in Material-UI
- React project Error: Map container not found
- Error: Element type is invalid:Edit button showing error
- ReactJS DOM dynamic refs
- Update state with object from key input [React]
- React router not open 404 not found page
- Warning: React.createElement: type should not be null or undefined
- React/React Hooks: onChange function to change text is changing for all 3 elements simultaneously instead of just one
- How to pass from route to react component that is a child in a nested component
- Ternary inside input react
- Property 'onload' does not exist on type <ImgHTMLAttributes>
- Uncaught TypeError: Invalid attempt to destructure non-iterable instance
- MUI Datepicker how to disable next month only
- React create new component instantly
- Calling a function containing axios.get() from useEffect(): 'await' syntax error
- How to test button that on click renders html element within the same component in React testing library, Jest?
- amp pages stopped working at nextjs project, error at cdn.ampproject.org, resources cannot be loaded
- Apollo Client cache doesn't update on query when variables are changing
- Setting state in React
- Passing back-end data after authentication to be rendered to the screen in React JS?