The preferred method to test React Native components right now seems to be to use a combination of mocha, react-native-mock, and enzyme to shallow render components.
The problem is that shallow rendering only goes one level deep, and sometimes components have nested views that require you to test an additional level or two.
In theory, enzyme supports mount() to fully render a component, but in practice this fails because react-native-mock's View mock does not recurse into children.
In light of these restrictions, how are people testing their components deeper than one render level?
We solved the problem of getting mount() to work with enzyme to fully render React Native components. We wrote about it at https://blog.joinroot.com/mounting-react-native-components-with-enzyme-and-jsdom/
If you use our fork, react-native-mock-render, and set up jsdom, you'll be able to mount components.
I was able to solve this by switching my component tests from mocha to jest and following the instructions here for snapshot testing: https://facebook.github.io/jest/docs/tutorial-react-native.html
I then added jest to my existing test target in package.json:
"test": mocha … && jest"
One thing to be aware of is that I did have to follow the instructions to add mocks for things I would have expected to have been mocked out of the box (eg. TextInput), as well as using moduleNameMapper to map some native components that weren't resolving properly.
Related
i'm currently using JSX for Vue component, but currently, the devtool would show a very ugly nested hashed functional component tree like this, is there any way to avoid this? As far as I know, Vue devtools doesn't provide us an option to hide these functional components, therefore this would be very annoying
I'm building a UI package for Form module, I want to use JSX for Vue because that would make contribution much easier when a lot of people from React.js can jump in and help.
My package: https://www.npmjs.com/package/formkl
we are trying to write some high level / e2e jest tests in our vuejs/nuxt project. The goal is to be able to test some interactions between components at the Nuxt Page level. To accomplish this I'm doing a (deep) mount of the page component but the resulting wrapper only contains that page component, and its child components. In unit tests this is exactly what we would want, as the layout should be tested separately. However, in this case we want the page to be wrapped in the layout so we can test the interaction between the page and the components in the layout. Does anyone know if there is a way to do this? Any help would be appreciated. Thanks!
In case of using UI frameworks (like Bootstrap-Vue, ElementUI or Vuetify, etc.) in our Vuejs application, it's possible to import entire UI framework components & stylesheets from node_modeules in the App.vue(or in the application entry point), or importing a particular ui component in particular Vue file/Component as needed.
The demonstration of these two approches looks like:
For scenerio 1
in App.vue
import BootstrapVue from 'bootstrap-vue'
For scenerio 2
in any particular .vue file
import {BContainer} from 'bootstrap-vue'
So,In case of the first option, does it make the application slower or less performing as all components from UI framework is loading for each route change? Also, its's loading some components that are not needed.
On the other hand, it's quite inconvenient to import each ui component in every .vue file.
So what is the best practice for small or large scale web applications?
Does the practice is same for other JS frameworks/Libraries link React or Angular?
Thanks in advance.
Scenario 1 – register all components globally
All components from the library will be available to use everywhere.
If you change or update the library and some of the component names have changed, you won't get any errors at build time.
Scenario 2 – pick-and-choose specific components locally
Gets annoying to have to import each component when you want to use it.
Only components that are actually used (imported) will be included in the bundle (if using webpack or something similar). Results in a smaller bundle size.
It is clearer to look at the template and know where each component comes from. If you have lots of globally-defined components then there is no clear link between a component and where it came from.
If you change or update the library and some of the component names have changed, you will get build errors due to missing modules.
So,In case of the first option, does it make the application slower or less performing as all components from UI framework is loading for each route change? Also, its's loading some components that are not needed.
It does make a difference when you are importing the entire package globally. Also it won't reload the package for every route change as you have the import inside App.vue. It will be done once when your app is loaded for the first time.
I found this article very helpful on how to optimize loading 3rd party components into vue app.
On the other hand, it's quite inconvenient to import each ui component in every .vue file.
End of the day it all comes to how much of tradeoff your development team is willing to make between optimizing the app and adding multiple lines of import code into individual components.
How to visualize a Vue js application's component hierarchy ?. I know that thier is a React Sight that used for a live view of the component hierarchy tree of React application.
Thanks
If I understood correctly you are looking for something like the devtools? Check this https://github.com/vuejs/vue-devtools
There's also DejaVue however it hasn't been touched in 5 years. Works on Vue 2, may not work on Vue 3.
I am working on a Vue Application which has nested components.
I am using Jest for writing Unit test cases.
While executing unit test cases on a parent component, i noticed the child components are not loaded.
I am using shallow rendering in test suites.
Please share any links or tutorials on this topic.
Thanks
a) Use mount instead of shallow
b) Import the child component at the top of the spec.js file, just as you did with the parent