score:0
You are really asking to test two different things:
- That
mapToProps
will call your action helpers as you suspect - That your event handlers passed as props will be called when an event is triggered
I don't see the value in doing #1 for such simple functions, and anyway, in order to test mapToProps
alone you would need to be able to inject the functions used in its definition to be able to test that they are called. Doing that would require seeing more of your code.
Alternatively, assuming the action creator functions are coming from another module you could use a link seam to intercept calls to the action creators module and substitute the return values with your own.
Using proxyquire
your test could look something like this:
const sinon = require('sinon');
let fakeActions;
let MyComponent, mapToProps;
function setupFakeActions() {
fakeActions = {
fetchPaymentDetails: sinon.stub(),
/* etc ... */
};
const module = proxyquire('../src/my-component', {
'./actions': fakeActions
});
{MyComponent, mapToProps} = module;
}
describe('MyComponent propmapping', ()=> {
setupFakeActions();
it('should create a function that dispatches actions', () => {
const dispatchStub = sinon.stub();
const result = mapToProps(dispatchStub);
result.fetchPaymentDetails();
assert(dispatchStub.calledOnce);
assert(fakeActions.fetchPaymentDetails.calledOnce);
// more assertions: http://sinonjs.org/releases/v2.3.4/assertions/
assert(dispatchStub.calledWith(fakeActions.fetchPaymentDetails));
});
});
You have not tagged your question with redux, but assuming you use that, there is another way you could test that the functions do what they should, and that is of course to just create a store, trigger the action, and see if the right result comes out of the store, but that is quite obscure in intent and implementation, and so not recommended.
Now, the second point is more valuable, and quite straight forward using Enzyme:
/* assuming existing test setup code for Mocha is in place: describe, it, ... */
it('calls assigned props on click events', () => {
const props = {};
props.fetchPaymentDetails = sinon.spy();
const wrapper = shallow(
<MyComponent fetchPaymentDetails={fetchPaymentDetails} />
);
wrapper.find('button').simulate('click');
expect(props.fetchPaymentDetails).to.have.property('callCount', 1);
});
Source: stackoverflow.com
Related Query
- Sinon & React - check if mapToDispatch methods are called
- When and how are React lifecycle methods called in the NextJS SSR process?
- Is there a performance hit when methods returning JSX are called in render function of React component whenver any state is changed?
- How do I test component methods on a React component that are defined as arrow functions (class properties)?
- Testing - React stateless components, spying on component methods using sinon
- React TransitionGroup lifecycle methods not being called when component is loaded
- What are typical use cases for React lifecycle methods like componentWillReceiveProps
- React component `this` is not defined when handlers are called
- Are React useState hooks called with, and without a function parameter guaranteed to be called at the same time?
- How to mock react component and check if called with props
- Meteor method called from React components responce and error callbacks are always undefined?
- Why props alone are being used in called React function component?
- React Hooks "useState/useEffect/useCallback" are called conditionally
- Uncalled React methods are being executed, how is that?
- React hook form how to check if mails are equal
- How to check ReactDOM.render method to be called with a react component argument?
- How do I check if all elements are false within a a nested forLoop and return / store answer in a variable? React JS
- React Component and render method are called twice
- Check if all setState methods are completed in componentDidMount
- How to check id IndexedDB already exist inside of React lifecycle methods
- query not called when props are changed in Apollo client with react js
- Invariant Violation: Objects are not valid as a React child. Check the render method of `Content`
- React tag script are called only the first time
- How in React check if two conditions are true
- How lifecycle methods in react Js are working with the variable unsubfromAuth?
- Many http requests are being made when I visit a React route even though only one request is being called
- how to check function is called or not in react js?
- What are these three dots in React doing?
- Invariant Violation: Objects are not valid as a React child
- React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function
More Query from same tag
- How to do request on page load, react hooks
- Reshape object into another object
- Scroll to a custom component
- Conditional asignment with yield
- React-Router skip search queries on back button press
- Send parameter value via React routing
- React Router browserHistory works on local, not on production
- React - What is the best way to change an elements text each time the user clicks anywhere on screen?
- Redux Form always validates even on a normal button press
- How to test state that has been lifted up from child to parent component in React?
- Stateless component in React and "Props is defined but never used" ESLint error
- React Component not rendering on using react router 4
- Getting error, `Prop `className` did not match` when deploying to Heroku, but works locally
- Unexpected '!' in 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker'
- 2 react-select components on page - one changes value of another
- Access ClassList property of JSX Elements
- redux-form fire action change value but not change input value
- Issues with SVG Patterns in React
- Update state with dynamically constructed object using reducers in React
- ReactJS, Hooks - How to setState after .map() function?
- How to change the color of the calendar icon of the TextField date-picker? In Material-UI React
- How to get info from API based on similar attributes
- OnChange for Storing Value of Selected Drop Down Option
- Is it possible to draw a shape based on an onClick Event in React JS using react-konva?
- Classnames not working as expected in React 16
- How to use an async database call to set a variable with useState() and useEffect()?
- reactjs: How to replace the entire route table programmatically
- How to return a jsx element with an inline switch?
- Unable to dynamically set a string of text using useState in React
- Show div on tab and onFocus and hide on onBlur