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
Related
What is the difference between Enzyme and React Testing Library and which one should I use for testing in React project?
Enzyme: https://www.npmjs.com/package/enzyme
React Testing Library: https://www.npmjs.com/package/#testing-library/react
In Enzyme, we test the component using the state and props of the component. This generally means that the tests are brittle. Let's say we have already written tests for a component and it is running fine. But what if someone changes the variable name of a state or props in the component, then even if the functionality of the component hasn't changed, our test fails. This kind of behavior demonstrates the brittleness of the test.
Whereas in React Testing Library, we test the component from the user's perspective. Let's say we want to test a drop-down component, we won't test the component according to its state and props. Instead, we use the DOM elements to test it, just how the user interacts with it.
The primary purpose of React Testing Library is to increase confidence in your tests by testing your components in the way a user would use them. Users don't care what happens behind the scenes, they just see and interact with the output. Instead of accessing the components' internal APIs or evaluating their state, you'll get more confidence by writing your tests based on the component output.
At some point, React Testing Library became more widely used than Enzyme.
I have created one search component using stencil and I'm integrating this stencil codebase with my react application via cdn link. I'm displaying the search component(which was created in stencil) as below in my react codebase :
<custom-search placeholder="Search"></custom-search>
The search component contains a search icon. I need to pass the text in search input field to my react code on click of this icon. How can this be achieved?
Unfortunately I haven't integrate Stencil JS component with React, but passing string data to web component should be working without too much hassle. Do you know if your React app can properly recognize your custom-search component? If not, then you might want to take a look at a link to Stencil JS official document of integrating Stencil JS component to React and make sure component get properly loaded and integrated.
If you know for sure you load the component then not sure why your placeholder is not set within your component - it is just a string after all. Maybe post the custom-search component code, as there might be issue with that (i.e. component lifecycle event you are using might not be doing what you expect to do)
Could you clarify the actual problem, please? :)
Does the component not get rendered, or are you unable to achieve communication from custom-search to the React app?
If the latter is the case, you might want to implement a Custom Event on the Stencil component, to communicate changes back to the consuming app.
As #tomokat mentioned, you should follow the official Stencil React integration docs. This is required, since React cannot handle Custom Events natively, and requires some help from the dev.
Edit: Sorry, I got confused by the first answer. Your title is quite clear, though. If you can show some example code of the component and the React integration, we could probably help in a better way.
I'm working on a prototype for a web app and I chose NextJS because I wanted to learn it better, but I realize I'm not using it in the "standard" way. I started from the Next + Material-UI example here: https://github.com/mui-org/material-ui/tree/master/examples/nextjs and all was good.
But now, I'm trying to persist data using sessionStorage, and I'm finding it difficult to make this work without being able to use the componentDidMount lifecycle event at the page-level. Next's documentation says that projects with a custom _document.js file won't have the componentDidMount method client-side. My project uses a custom document file due to Material-UI. It seems like it's there to support server-side rendering of css-in-js frameworks.
If I don't need server-side rendering, is there a way I can keep Material-UI working, but do away with the custom _document.js file so I can use componentDidMount?
You should be fine using both sessionStorage and a custom document.
componentDidMount (and any other lifecycle method) is not working only for _document.js as this is not rendered client side.
sessionStorage is part of the window so you will be fine using it on any other page/component using the componentDidMount lifecycle.
I am currently studying RN by myself, without prior knowledge in React. A lot of things seem to exist in both such as Redux and hooks. Many of the resources I find refer to React in the title (e.g "Redux Crash Course With React").
My question is: where does the line cross between React and React Native? Would I be fine studyig form these resources that refer to React, or would that just confuse me?
I'm trying to understand a go to approach to understand which resource I'd be fine with and which would be irrelevant.
React Native contains React library to use it as front-end library.
Most of usages of React are the same for React-Native. And it is same for Redux too.
React-Native must have other libraries to build applications that can run on both of Android and iOS.
Also it has middleware libraries that allow us to use most of native libraries' functionalities. As an example you can check Alert directory out. It is used for to show native Android alert dialogs.
Good luck..
Both react and react native use javascript to create the user interface we need but the difference is in the rendering, style and bundling and you should know that react native is a framework itself but react.js is a library. the main difference:
---React-Native doesn’t use HTML to render the app, but provides alternative components that work in a similar way. Those React-Native components map the actual real native iOS or Android UI components that get rendered on the app.
---With React-Native, you’ll have to learn a completely new way to animate the different components of your app with Javascript.
--- navigating between pages are totally different!!!
so we conclude that it's better to study references based on RN not react.js . but some functionalities such as redux or hooks or a lot of it's components are exactly the same and you can study react.js references for them. only the 3 differents that i said above are important.
I am using React-Redux-Form and React-Bootstrap on client side of application.
I'm stuck on how to testing my components. I have made a small project on github with one of my components named LoginModal:
https://github.com/DmitryIvanovIAMM/react-redux-form-login-test/blob/master/src/tests/Foo-test.js.
To start testing, I am following this tutorial https://www.codementor.io/vijayst/unit-testing-react-components-jest-or-enzyme-du1087lh8.
But when I try to .find() button in my rendered component, the result is an array of length zero. So I can't simulate its behaviour. I try find it (button) several different way but unsuccessful. Please, your suggestion.
This issue is with the rendering of Modal component that is part of #react-bootstrap. There is a discussion about it on https://github.com/react-bootstrap/react-bootstrap/issues/876.
The alternative is to use ReactModal from react-modal. Testing it is described on http://remarkablemark.org/blog/2017/05/17/testing-react-modal/