Question: How can you reference native UI elements in vue 3 and vue test utils without adding extra attributes to that UI element?
When testing vue components with vue 3 and vue test utils, I noticed that there wasn't really an elegant way to find UI elements. Since Vue 3, Vue Test Utils do not provide a way to use the ref attribute anymore on a native UI element like a button for example.
I know about these solutions:
<button data-test="button" ></button> or <button class="button"> </button>
But adding extra attributes or classes to the component just for the sake of testing the component doesn't feel like a solution. Also the error that the test throws is not very descriptive. For example when testing events Error: Cannot call trigger on an empty DOMWrapper.
Related
If we are using react component libraries we need to pass style in props, how this aproach is helpful than setting bootstrap style inside className
We can do bootstrap styling. There is nothing wrong with it, by writing className and giving bootstrap class name and everything.
But in react, we can create a component which means we can divide our App into smaller app and control the inside data through props and state. So by passing the style through props gives us more flexibility, we can customize the component design based on its data. I think this is the main feature that we can get.
I'm trying out ReactJS.NET in a .NET Core MVC project where I've got an ASP.NET View (cshtml) with a React component in it, which I initialize with:
<script src="#Url.Content("~/Scripts/myComponent.jsx")"></script>
Now I want to pass data from the ASP.NET View to the React component. For example, calling a React function when I click a button on the ASP.NET View. Is this possible? I know it's a basic question but I couldn't find any help since in all examples the data is only passed between React components and not from outside (ASP.NET View).
I couldn't find a way to do what I described in this question. So I ended up coding the whole page in ReactJS, which took some time to get into but it worked out well and I didn't have to mix technologies.
Declare a JS variable in a script and assign a property value from the Model:
<script type="text/javascript">let modelProperty= '#Model.ModelProperty';</script>
<script src="#Url.Content("~/Scripts/myComponent.jsx")"></script>
Then use that modelProperty in your ReactJS script:
ReactDOM.render(<MyComponent prop0={modelProperty} />, document.getElementById("yourTargetElementId"))
Maybe there are more neat solutions...
I have just begun application development with Kendo UI & Vue.js. I have developed Kendo UI applications earlier but without Vue.js. As I started putting the basic code in place to test how Vue.js would work for me, I saw that Kendo UI fails when the Vue object is initialized and takes over. Kendo.all.min.js throws an error - i is undefined and this renders all the UI useless. The UI then takes no clicks, no inputs. To demonstrate I have created a DOJO here - http://dojo.telerik.com/oDAsE. When the Vue code is commented, the dropdowns in the toolbars work. When you uncomment the Vue code, the toolbar stops responding and console shows the exception - i is undefined when you perform some actions on the toolbar (try clicking the dropdown). I could not post this on telerik forums as my subscription period has expired :(. Appreciate your help !!
It seems like in your case the Vue object initialization is updating the dom in a way that breaks the logic that is expected in Kendo Toolbar. In such scenarios I would recommend using the official Kendo-Vue.js integration that designed and tested against such possible gliches.
I want to implement react js to different pages of my website,
e.g
in home page, registration, login, etc.
all tutorial i have seen it only uses 1 app.js how can i achieve this
to multi page app.
P.S i am using laravel elixir and i combine them into 1 main.js.
Add a mounting point in the pages that you want your React App to be mounted.
e.g.
// main.js
ReactDOM.render(<App props={/* props from somewhere */}/>, document.getElementById('mountingPoint') );
// rendered HTML from pages should have
<div id="mountingPoint"></div>
I found this https://github.com/christianalfoni/react-webpack-cookbook/wiki/Multiple-entry-points
I think this is more appropriate on what i need and then i will just map the file
name in my laravel app.
this way i dont need to load the js code for contact_us.php to login.php
You could also use something like React Habitat to make this architecture easier.
With it, you could just define a container of your components so they resolve in your DOM.
For example, in your javascript you would do
import MyComponent from './Components/MyComponent';
...
container.register(MyComponent).as(myComponent);
Then in any of your HTML pages
<div data-component="myComponent"></div>
It also supports multiple containers and async code splitting.
I'm ReactJS developer (react, flux, react-router, gulp, nodejs etc...).
How do I embed react components into blade template?
Or, at least, where should I start searching for answer?
Please, let me know, if I can provide any more useful information on this case.
You don't embed them in your blade template, your template provides a DOM element which the React component can render its output to. For example, in your template you have:
<div id="root"></div>
and in your javascript/jsx:
React.render(<MyComponent/>, document.getElementById("root"));