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
Related
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 looking for a simple way to document Custom React Hooks, and Storybook has caught my intention as a clean and relatively easy way to document/demo components I write in React.
However, I can't seem to find any examples of how to document a Custom hook in Storybook.
Currently I have to create a wrapper component and redefine all my hook's arguments as the props, and also return some html.
Was wondering if there's another way that people have come up with to document hook usage, inputs and returned data (types, description, control values, etc.)...
If anyone has any experience with this, a simple example would be greatly appreciated!
ps: using storybook v6
I'm evaluating widget toolkits for a new project, and I want to be sure that I can write unit tests for them first. So I've created a simple component using Material-UI based on react-autosuggest using axios to query a simple API. The component works just fine, but I can't seem to get it to work with React Testing Library.
The test is failing with this: "Cannot read property 'px' of undefined"
It almost seems as though Material-UI isn't loading fully, so the component can't be tested until it is. I have no previous experience with unit testing React components, but shouldn't it load in all the dependencies at the top of my component when it renders?
Here's a demo of my failure in Code Sandbox:
https://codesandbox.io/s/testing-material-ui-problem-ndn9f
I'm trying to test a component that uses a custom hook. That hook uses context with the useContext hook.
My problem is that the context persists between two consecutive tests. I've tried mocking the context, but that doesn't help.
You can see the code in this codesandbox: https://codesandbox.io/s/l0192w68z though I couldn't get the tests to run there...
I also uploaded it to github where the tests actually run: https://github.com/uriklar/react-testing-library-with-use-context
I'd appreciate any pointers! How can I get a fresh context on every test run.
Thanks!
The problem is that your <MenuItem /> components are using the same (default) store between tests. There were a few issues actually and I talked about them all in this livestream and here's a pull request showing what things you can do to improve things.
I hope that's helpful!
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();