I'm pretty new to React Native and Javascript, I'm currently trying to test methods inside my components, I've seen this being done with Enzyme like
const wrapper = shallow(<Component/>);
wrapper.instance().methodIwannaCall();
Coming from the iOS Dev world, I'm having a hard to understanding why it seems to be so complicated to get an instance of a class and call a method on it.
Unfortunately I'm using React 16.0.0-alpha.12 which means I can't for now use Enzyme, which seems to be the library everyone is using to accomplish what I need.
Also notice I'm not using Redux, I suspect this would be less of a pain if I'd use Redux, since that way all my business logic would be within actions and hence would be easier to test.
Any comments/help are greatly appreciated.
Cheers
You can use pure ReactTestUtils to get instance of your component, for example using renderIntoDocument method:
import ReactTestUtils from 'react-dom/test-utils';
const wrapper = ReactTestUtils.renderIntoDocument(<Component/>);
wrapper.methodIwannaCall();
Related
Im working on, on some tests using Jest and fireEvents from react testing library and i came across with this in the docs act wrapper.
I cant understand why events need to be in an act wrapper.
What is the purpose of an act inside there? Can someone provide a simple example?
Thanks
I'm new to React and have been developing a personal proyect using the fat arrow syntax and functional components. From what I've read, that is the new and best way to currently develop in React.
I've currently find myself in need of doing some threading, and research has pointed me in the direction of web-workers. However, I've been unable to find an example for webworkers in react that uses the arrow syntax, all examples use a function() which is what I'm trying to avoid. Could anyone give an example on how I could do this? I really don't know how to do any of this, the creation of the worker, the posting and recieveng of messages and the termination.
P.S.: I'm using JavaScript version of react, not TypeScript
You can create a functional component like this and also can create a arrow function too.
const YourFunction = (props)=>{
return ()
}
I'm new to using Next.js to create websites with react.js. I am trying to put the module "react-insta-stories" (https://github.com/mohitk05/react-insta-stories). Only he accuses that the document is not defined. I know you've had similar questions here, but I wanted to ask you something different, more general ... Because there are several awesome modules that I wanted to use in this project and the next.js seems to make it difficult. Some modules just that only speak with the "browser" . The question is ... can I use any module even from react.js after javascript instantiates my application with no problems with next.js? And does anyone know how I could put this react-insta-stories in my project? Because I tried some solutions, but I think they are beyond my knowledge.
By default next.js performs server side rendering. The quick and dirty way of getting react components that require the document or window to work is to call them as a dynamic component in next.
If you can a better way that allows for server side rendering of your component is to run this code in a useEffect hook or similar, as this will be sent to the browser to run.
For example
import React, { useEffect, useRef } from 'react'
function ComponentWithEffect(): JSX.Element {
const divRef = useRef<HTMLDivElement>(null)
useEffect(() => {
divRef.current?.width = window.width
divRef.current?.height = window.height
}, [])
return(
<div ref={divRef}/>
)
}
But this is not always possible, because with external libraries you might not have access to the underlying methods. There are heaps of examples in the repo as well.
I have been using enzyme and love it a lot. It works with react 16 until I wanted to test my new project that uses react’s new context api.
If I render only my basic component using shallow and console log the debug of the component I can see its content but when I use the new context api with provider and consumer, I get <undefined /> as a render out. Enzyme does not render the component but react does.
Can someone please provide some guidance.
Thank you.
Support for this and other React 16.3 features are going to be included in the next enzyme release which is going to happen in midst summer, this year (as said here).
For now, here's a workaround:
const outer = shallow(<SimpleComp />);
const Children = outer.props().children({ /* context */ });
const wrapper = shallow(Children);
To use mount() with new Context API use this enzyme patch.
I'm pretty new to React, and I would essentially have a service (one single instance) that I could somehow inject and use in multiple React components.
So far, the options I've come across by googling were:
Using React's context, but it's not recommended, because it is an undocumented API.
Passing the object along in the props, from component to component, but it feels a bit inelegant and tedious
Using an IoC container, such as inversifyJS, who looks great, only it relies on typescript, and I don't wish to write my React app in typescript.
Now, Inversify can apparently be used in vanilla JS, with inversify-vanillajs-helpers, but when I tried using it in React to resolve a component (my App component), it kept throwing an exception stating
"Missing required #injectable annotation in: ReactComponent"
So, I'm trying to figure out a way to get an instance of my service (the same instance shared across the few components that use it), either by making inversify work with React but without typescript, or a new approach I haven't explored yet.
Any ideas ?
There are a few things that you can do if you don't like TypeScript:
First, you are going to need the inversify.decorate method.
Second, this method is probably going to be too verbose for you. We created a helper called inversify-vanillajs-helpers for that reason.
And third, React doesn't play nicely with constructor injection so we created a helper to facilitate lazy property injection called inversify-inject-decorators.
Those three tools should lead yo to the desired result :)