3 ms·

> The third difference is event binding, where in Stencil they promote using arrow functions while React promotes explicit binding using the .bind() function.

by SamBam 6y ago

> The third difference is event binding, where in Stencil they promote using arrow functions while React promotes explicit binding using the .bind() function. Does React really? I haven't used `.bind` in years, even before moving to mostly hooks-based components. In this React doc [1] it describes .bind as being for ES2015, and recommends arrow functions for ES6, except if it causes optimization issues. 1. https://reactjs.org/docs/faq-functions.html https://reactjs.org/docs/faq-functions.html

sarreph 6y ago
Still exists in the docs[0] but I definitely wouldn't say React is "promoting" binding... I certainly haven't used it in years either. [0] - https://reactjs.org/docs/faq-functions.html https://reactjs.org/docs/faq-functions.html
cjones26 6y ago
It's impossible to mock functions when testing class-based components if you utilize ES6 arrow functions. "Jest can only mock the structure of objects that are present at require time. It does it by reflection (not by analysis), which means that properties that get added by the constructor cannot be mocked. It's important to understand though that a fat-arrow assignment in a class in JS is not a class method; it's a class property holding a reference to a function. My suggestion to that would be that you change the fat arrow assignments to standard methods and bind them in the constructor. That way they will be Jest aware. Otherwise I'm afraid there's not much we can do here." See: https://github.com/facebook/jest/issues/6065 https://github.com/facebook/jest/issues/6065
- yazboo 6y ago
  This is just automocking, though. If you need to mock out a component class method you can still provide a manual mock without too much trouble. I might be thinking too narrowly here but if you're needing to mock a component class method in the first place, it might be good to do it explicitly anyway.

by SamBam 6y ago

sarreph 6y ago

Still exists in the docs[0] but I definitely wouldn't say React is "promoting" binding... I certainly haven't used it in years either. [0] - https://reactjs.org/docs/faq-functions.html https://reactjs.org/docs/faq-functions.html

cjones26 6y ago

It's impossible to mock functions when testing class-based components if you utilize ES6 arrow functions. "Jest can only mock the structure of objects that are present at require time. It does it by reflection (not by analysis), which means that properties that get added by the constructor cannot be mocked. It's important to understand though that a fat-arrow assignment in a class in JS is not a class method; it's a class property holding a reference to a function. My suggestion to that would be that you change the fat arrow assignments to standard methods and bind them in the constructor. That way they will be Jest aware. Otherwise I'm afraid there's not much we can do here." See: https://github.com/facebook/jest/issues/6065 https://github.com/facebook/jest/issues/6065

yazboo 6y ago
This is just automocking, though. If you need to mock out a component class method you can still provide a manual mock without too much trouble. I might be thinking too narrowly here but if you're needing to mock a component class method in the first place, it might be good to do it explicitly anyway.