In my vue3 project i started to write unit tests using Jest and Vue Test Utils. I'm using web components generated by Stencil.js and here is the problem. Jest don't render them so I can't test my Vue components without logic from web components.
Here is how web component looks in Jest:
<ds-icon class="mr-2" size="24px" icon="email" color="green"></ds-icon>
And it should look like:
<ds-icon class="a-dsIcon -email hydrated" style="font-size: 20px;"></ds-icon>
According to Stencil documentation I need to apply pollyfils and define custom components with code:
applyPolyfills().then(() => {
defineCustomElements()
})
But here is problem is that solution of problem? Where should I add this piece of code, so Jest will render
Related
Is there a way to inject ExtJS library inside Cypress testing environment?
For example, I have a grid with itemID: 'something' and I would like to fetch it in a test using Ext.down('#something');
Currently I get an error that
Ext is not defined
Is there a way to include it?
In the project ExtJS is added using <script> tag in index.html
I am trying to build a simple micro-frontend example using Vue3 and Module Federation but I have a collision problem.
I have the code here:
https://github.com/ghalex/mf-example
There are only two mf:
container (Vue3)
auth (Vue3)
The problem I have is that when I import the App.vue component:
// index.js - in container
import App from './components/App.vue'
// indexAuth.js - in auth
import App from './components/App.vue'
in the auth module and load the module in container the App.vue component is overwritten.
Is there any webpack settings am I missing to make sure each component is loaded separately ?
I found the problem, it is a webpack-dev-server v4 bug. I downgraded to v3 and everything works fine.
I am trying to use #nuxtjs/storybook inside a Vue Storefront Next (https://docs.vuestorefront.io/v2/general/key-concepts.html) project.
I can get Storybook to open and to show stories, but the component within the stories are not rendered. For example, if I try and use the example from https://storybook.nuxtjs.org/usage then I see a <link> element in devtools (the name of the Vue component), not a rendered <a> element (the content of the Vue component):
I then switched to trying to use another simple component:
https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.vue
https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.stories.js
But that doesn't work either, you can see an example of that here: https://pedantic-chandrasekhar-a83cfc.netlify.app/?path=/story/logo--logo (I had trouble getting Storybook to work on Codesandbox).
Vue Storefront Next is based on Nuxt but I had to make a few changes to get Storybook to open:
Update the build section within nuxt.config.js:
babel: {
presets({ envName }) {
return [
[
'#nuxt/babel-preset-app',
{
corejs: { version: 3 }
}
]
]
},
ignore: [/[\/\\]core-js/, /#babel[\/\\]runtime/],
},
install #babel/runtime-corejs3, core-js 3, and ts-node
ts-node was necessary because Vue Storefront Next provides a tsconfig.json file for development of part of the project, and that makes #nuxtjs/storybook module think the project is a Typescript project (https://github.com/nuxt-community/storybook/blob/e5b3698482873d7129cd763a0422b8c3151cee0b/src/index.ts#L67-L76), but the Vue Storefront project does not use #nuxt/typescript-runtime - I am wondering if this is part of the problem?
You can see the package.json content on Codesandbox: https://codesandbox.io/s/admiring-pine-2byq7?file=/package.json
Any clues as to how to fix this issue would be SUPER appreciated, thank you! I've spent the best part of a day on this but I don't know enough about Storybook or Nuxt to be able to debug it myself, unfortunately :(
It turns out that the #nuxtjs/storybook module seems to be dependent on components: true being set in the project's nuxt.config.js file.
This isn't mentioned anywhere in the #nuxtjs/storybook documentation, but I've raised a Github issue to point this out and will raise a PR against the docs if the maintainer agrees.
You can see my thought process behind how I discovered this issue in this Github thread: https://github.com/nuxt-community/storybook/issues/233#issuecomment-785027558
If I run yarn test, which runs jest, I get the following error:
C:\react-native-project\node_modules\react-native\Libraries\Utilities\warnOnce.js:15
const warnedKeys: {[string]: boolean} = {};
But that only happens if I follow the directions of the react-native-testing-library:
Then automatically to add it to your jest tests by using setupFilesAfterEnv option in the
jest.config.js file:
If I remove the file I will not get that error and I can get simple tests to run. When I remove the file, the test runs but AsyncStorage is not recognized so the tests still don't run. I have AsyncStorage. It's installed and the app works, but I want to add component tests. I also noticed the file, jest.config.js, is conspicuously missing from the testing project itself. Is there any documentation or working example? I would rather not do a diff of my project and the testing project. Is there a more well-documented or reliable testing framework/module available?
I'm able to get working tests by following the documentation of the React Native Testing Library with the npm package name of #testing-library/react-native not to be confused with the React Native Testing Library with the npm package name of react-native-testing-library. Both packages allow testing components and are recommended by React-Native documentation but this one works when following the instructions. It also has instructions "to define a custom render method that includes things like global context providers, data stores, etc" so that testing components with AsyncStorage and such shouldn't be a problem.
I have a Vue Cli 3 generated web component/custom element that uses Vuetify. I have a parent/host Vue App that is also using Vuetify. When the custom element loads into the host app, I get a bunch of Type errors as shown in the screenshot. e.g. Type Error: Cannot read property theme of undefined.
This appears to be a Vuetify issue. What is the correct architecture for using Vuetify within a Vue CLi custom element and in its host application?
Currently, I have Vue.js script tag in parent, for use by the custom element. And Vue is imported into the Vue app, as normal. Script tag is there only because the custom element requires it. I have Vuetify included in both as well. The web component is using the vuetify plugin. And so is the host.
The web component runs perfectly fine on its own, and so does the host app. So, apparently there are conflicts.
Thanks!
Donnie
Resolved this myself. In short, you cannot use the Vuetify plugin and the al-a-cart. It only works if you include the full Vue and Vuetify inside the web component. Not optimal, but at least it is a workaround for this Vuetify bug.
import Vue from "vue";
import Vuetify from "vuetify";
Vue.use(Vuetify);
// import { VApp,VToolbar,VToolbarTitle,VSpacer,VContainer,VLayout,VFlex,VCard,VCardTitle,VCardActions,VBtn,VDivider } from 'vuetify/lib';
export default {
/* components:{
VApp,VToolbar,VToolbarTitle,VSpacer,VContainer,VLayout,VFlex,VCard,VCardTitle,VCardActions,VBtn,VDivider
} */
}