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
Related
I am confused about how to test Vue components with Vue Testing Library.
For example, I hava a parent component with a lot of children components, and in the parent component, I do many things, such as search and display data, add data, delete data, update data...
So, should I test parent component or children components?
And if I test parent component, how to mock the request(using axios) in the mounted function?
Help me answer my questions.
I'm currently exploring unit testing and Vue test utils particularly. I have an external library (vue-toastification) that shows a toast message when something occurs. I'd like to test that this toast has been shown, if an Error was thrown. But the problem is that the toast is rendered outside component's scope (in App.vue, as far as I can see), meanwhile with .get method we can only retrieve child components of a wrapper. So, how can I access this toast component without mounting the whole application? Maybe I should somehow use <teleport>?
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!
I have a pair of components as follows:
ParentComponent
-- ChildComponent
where child is rendered within parent. There are no console errors on the front end.
However, a simple jest test:
it("renders child form", () => {
expect(wrapper.contains(Child)).toBe(true);
});
fails and gives the warning:
Unknown custom element: <Child> - did you register the component correctly?
Tests on the child individually pass, and the parent/child have rely similar stores and getters so the test setup is identical.
Why does this happen? Is there a way I can better debug the process the test is taking to see why the child is not appearing in the parent?
At the top of the tests there is a beforeEach that shallowMounts the parent with the mock store. ShallowMount is not the issue as the test does not run with mount.
Found the answer - Vue didn't like the use of a router to do router.push("routeName"), and would only run with this.$router.push. Vue didn't give any useful warnings so trial and error was the only way to fix it!
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.