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
- How can i use a function in different files in React?
- How to override Bootstrap theme colors in bootstrapped react/redux app?
- react-bootstrap - Form.Control defaultValue not updated when re-rendered
- How to integrate clojurescript to existing javascript code base?
- Mention list and emoji top position (Draft.js)
- Add div fade-out in React with SCSS and conditional rendering of div
- Curl comes back with the correct response, Browser is getting back null
- React <Link to...> when table row is clicked
- react how to style : styled-dropdown-component
- Divider Disappears When Adding Floated Tag on Vertical Menu Semantic UI React
- React Testing Library: Objects are not valid as a React child
- Color of status bar using react navigation
- Conditional property in react/jsx
- TypeError: email.indexOf is not a function in React using react-mailchimp-subscribe
- React Ref Api's
- How to programattically update a form field value in antd
- How to add dynamic values in between words in a sentence using Javascript?
- Use of browserify to pack React components
- NextJS TypeError: Cannot read property 'pathname' of undefined
- React: How can you pass a "not defined" variable as a prop to a component?
- Docker/Reactjs/Nodejs - How to install dependencies and run application after docker-compose up
- How can I get the correct ID assigned to the delete function
- Change objects position in array in react
- React hooks performance and best practices
- Make ant design modal resizable
- changing controlled component state in semanticUI
- Returning values from an array in reactjs without using this.state
- How to update the result on right side based on user input
- ReactJS, check difference between this.state and nextState
- Module build failed babel-loader Unexpected token "<"