score:1
Accepted answer
You pass your User
component a mock function (jest.fn()
) through its handleFollowClick
and handleStarClick
props, then simulate whatever is supposed to trigger the parent action (a click
event on the <button />
or a change
event on the <input />
) and test whether the corresponding mock function was called.
I personally always use Enzyme for this sort of thing, but here's how I'd assume it works using react-test-renderer
based on this answer:
const mockFollowClick = jest.fn();
const mockStarClick = jest.fn();
const tree = renderer.create(<User
{...users[0]}
handleFollowClick={mockFollowClick}
handleStarClick={mockStarClick}
/>)
const button = tree.root.findByType('button');
const input = tree.root.findByType('input');
button.props.onClick();
expect(mockFollowClick).toHaveBeenCalled();
input.props.onChange();
expect(mockStarClick).toHaveBeenCalled();
You can even check if it was called with the correct user id:
button.props.onClick();
expect(mockFollowClick).toHaveBeenCalledWith("5d552d0058f193f2795fc814");
Source: stackoverflow.com
Related Query
- React snapshot test with Jest, how can a child component calls a function from parent component?
- How to test with jest and typescript with types a basic react function component
- Enzyme/Mocha: How to test a react component function by firing an onChange event from a child component
- Is there a way to unit test an innaccessible callback function that is called from a child React component using jest
- How can I test if child React component was rendered based on a URL change using Jest and Enzyme
- react (class based) : How can I update JSON object in parent component using setState after the object being passed in function from child to parent?
- How can I transfer an information from child component to parent component React.js with React Router
- How can i test with jest a react component who use context api?
- How can I prevent my functional component from re-rendering with React memo or React hooks?
- Test a React Component function with Jest
- How to mock API calls made within a React component being tested with Jest
- How to test component callback invoked by child component callback in React with Enzyme?
- How can I write a unit test for a react component that calls reduxjs's mapStateToProps?
- How can I test React component's style with Jest + Enzyme?
- How to test the state of a functional component in React with Jest (No Enzyme)
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- how can I test if useState hook has been called with jest and react testing library?
- How to test a React component that has Router, Redux and two HOCs... with Jest and Enzyme?
- How can I get d3 in a React component to render in a Jest snapshot
- How to communicate from Child Component to Parent Component with React Router
- How to test a React component that uses context like in react-router 2.0 with Jest 0.8.x
- How to check the value of a nested React component in a unit test with Enzyme and Jest
- How to pass function from parent component to child component with type assingable
- Stateful React component with async function failing Jest test
- How to test styles and media queries rendered by a React component with Jest and/or Enzyme
- How do I test a React component that calls a function on its parent, which changes props on the component?
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- How to unit test React functions passed in as prop to child component with Enzyme shallow wrapper
- jest with enzyme - how to test a component from other library
- How can I collapse an accordion from a child component in react
More Query from same tag
- Proptypes for custom react hooks
- How can I asynchronously update multiple objects in the same array in React?
- want to execute startHandler() and useHandler() individually (i.e when one function is executing other should stop) but the are working simultaneously
- Render Component every time it's get clicked
- I made a some set state and I dont know what did work
- React - "Uncaught ReferenceError: exports is not defined" in react-is.development.js
- After the login click i am not able to render the data that i got from Login form into the HomePage
- React: form is clean when I refresh the page
- Mocking window.get() with Jest
- How to extend input component functionality
- toggle class on multiple elements react
- Cannot figure out why useState hook is not updating properly
- Exclude child components from <div onclick>
- localStorage + createContext
- How to display submenu links in React
- How do I flatten the multi object data and map to a JSON schema uisng reactJS?
- How do I declare a generic React component in a const variable from a higher-order component?
- Losing key value pair in react when mapping over props
- react router changes the URL, but the component is not rendered
- Toggle Switch unable to maintain the set value when onClicked
- Getting error `Type '{ theme: Theme; }' is not assignable to type` when trying to pass it as a prop to App component
- How to use firebase stored vidoes in reactjs
- Jest how to mock api call
- Redux Reducer - Adding new data to nested state
- Next.js - import css file does not work
- Design Bootstrap dynamic nav tabs component
- How to subscribe to a Redux action in a React component
- How to pass extra data using getOne in react-admin?
- How to delete the # from the URL when linking in react or vanilla js
- How to call parent method from child in react-redux