So I am migrating to vue 3 from vue 2. And I have this render() function:
render() {
return (
<form class={['form', this.horizontal ? 'form--horizontal' : 'form--vertical']}
onSubmit={this.submit}>
{this.$slots.default}
</form>
)
}
And well when webpack is compiled and I open app console I see this render like this:
Well I have no idea why is this happening? Any suggestions what could cause this?
Okay I found the answer vue 2 had this babel plugin as JSX support "#vue/babel-preset-jsx" well on vue 3 it is this "#vue/babel-plugin-jsx"
Related
I'd like to have multiple Vue3 components. Each as a separate Vue instance, and all automatically loaded.
Why? Because I want to use them on a page where there's potentially many other JS scripts that alter the page so I cannot change the DOM for them (by globally initialising Vue) and I want not to worry that they will mess with my Vue components - so mounting all my components to some one big Vue instance like <body id="app"> is not an option.
With Vue2 it was a bit easier but does not work with Vue3. Now after some fight I worked out a solution for Vue3 it works fine but it seems ugly in my eyes so I assume there's a better one :)
I'm using (laravel-mix - Webpack solution for building my files).
Here's my HTML file with the components embedded:
// index.php
<TestOne data-vue-component="TestOne" />
<TestTwo data-vue-component="TestTwo" />
<TestOne data-vue-component="TestOne" />
And here's my JS file for loading those components:
// index.js
import { createApp } from 'vue';
const vueComponents = document.querySelectorAll('[data-vue-component]');
if (vueComponents.length) {
vueComponents.forEach((elem) => {
const componentName = elem.getAttribute('data-vue-component');
const app = createApp(require(`./components/${componentName}/${componentName}.vue`).default);
app.mount(elem);
}
}
So I look for the Vue components using data attribute data-vue-component and then for each one found I get the component's name, create a Vue3 instance importing the component at the same moment. Finally I mount it and do the same with the next one.
I'm trying to implement some Testing Library tests on a Vuejs app, but I can't figure out how to pass props to a component within the test.
For example, I want a unit test for a component that appears inside of its ParentComponent template like this. I am trying to write a unit test for the ChildComponent.
<ChildComponent hereIsAProp="important info" />
I'm surprised this scenario isn't covered in the Vue Testing Library basic examples. Makes me think I'm missing some best practice around using/testing Vuejs props.
I imagine something like render(ChildComponent, { props: { hereIsAProp: "new info"}) should do the trick. But I can't find this in the docs and whatnot.
Testing Libary's render() is a wrapper for Vue Test Util's mount().
The second argument to render() is passed onto mount() as mounting options, and mount() can set the component's props with the props option (in version 2x) or propsData (in version 1x).
So your guess is actually correct:
render(ChildComponent, { props: { hereIsAProp: "new info" } })
I'm trying to figure out how to test (using vue test utils & jest) whether a Child Component (which is shown via v-show) is currently visible or not (irrelevant of the Child Component's contents).
My vue html code looks like:
<ChildComponent v-show="isShowing"/>
I can't figure out how to test it. I came across this: https://github.com/vuejs/vue-test-utils/issues/327#issuecomment-355501127 however, wrapper.findComponent(...).hasStyle is not a function.
The closest that I can think of is testing the boolean:
expect(wrapper.vm.isShowing).toBe(true)
I know how to test if it was using v-if:
expect(wrapper.findComponent(ChildComponent).exists()).toBe(true) //it is conditionally rendered
expect(wrapper.findComponent(ChildComponent).exists()).toBe(false) //it is not conditionally rendered
Could anyone point me in the right direction? Thanks in advance!
There is a way to test, by using isVisible method.
isVisible() method check if the display:none or not and also it can test visibility:hidden and opacity :0
Here is an example with your code:
expect(wrapper.findComponent(ChildComponent).isVisible()).toBe(true)
And if that component is the main wrapper, then use like this:
expect(wrapper.isVisible()).toBe(true)
The same happened with me, and is solved it by creating a jest setup file, as an index.js file inside test/unit with the following code:
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.config.productionTip = false
And after that I added the following to jest.config.js:
module.exports = {
...
setupFiles: ['./tests/unit/index.js']
...
}
For a react native app, is there a way to see console.log output in production? As far as I know this is impossible.
I know that I can write important messages to a file or to a remote database. I am looking for a simpler solution... Have you implemented such functionality using a github package that you recommend?
I am looking for a solution for android.
Get fancy by writing and using your own Component <ConsoleLog>
const ConsoleLog = ({ children }) => {
console.log(children)
};
Then use it:
render() {
return (
<div>
<h1>List of todos</h1>
<ConsoleLog>{ this.props.todos }</ConsoleLog>
</div>
);
}
if you want to log to file, use react-native-file-log package
I am using a HOC in a React component that looks like:
import React from 'react';
import Wrapper from 'wrapper';
class Component extends React.Component {
render () {
return (
<div className='component' />
)
};
}
export default Wrapper(Component)
When testing Component using Mocha I am attempting to look for a class name that should be contained within Component. Like so:
describe('Component', function () {
it('can be mounted with the required class', function () {
const component = shallow(
<Component />
);
expect(component).to.have.className('component');
});
});
The problem is that Mocha doesn't know to look within the wrapper for the Component and attempts to find it in the HOC. Which of course it will not.
The error I am receiving is:
AssertionError: expected <Wrapper(Component) /> to have a 'component' class, but it has undefined
HTML:
<div class="component">
</div>
How do I tell Mocha to look within the HOC for the correct location of the class name instead of the HOC itself?
You can use enzyme .dive()
const component = shallow(<Component />).dive();
expect(component.props().className).toEqual('component')
The problem is the use of Enzyme's shallow instead of mount, which is required when testing HOC's.
So, use mount.
I added this to a github project so you can see. Use my redux-form-test project and be sure to use the stackoverflow-question-38106763 branch. See the tests/unit/index.js file.
Be sure to read the source code of the test file. One of tests fails intentionally to reproduce your issue.
What's tricky in this situation is that the render method of the HOC exactly replicates the component it's wrapping. See the render method in the source of the react-onclickoutside component you mention. That's why the AssertionError you see is confusing: it shows you HTML that looks like it's satisfying the assertion. However, if you run
console.log(component.debug())
before your expect, it'll show
<Component />
That's because shallow only goes one level deep. And enzyme is not using the rendered HTML for the assertion, it's using the React elements, which does not have the component class on it, as you can see.