This post assumes familiarity with MobX.
Testing is an important part of your development workflow.
In my previous post (if you haven't read, please do)
I had shown two simple examples of how to use MobX custom hooks via the
mobx-react-lite package and how to use the traditional MobX class stores via the built-in
useContext hook. In this post, I will demonstrate how to test these components that use hooks via Kent C. Dodds superb react-testing-library. Do check the documentation for how to render your React components in tests.
I am using the same CodeSandbox examples used in my previous post for simplicity. Also you can view the tests and output at the same time.
For the first example, in which we use the
useObservable hook, the component is easy to test.
If you view the
index.test.js file, there are two tests,
- to check whether the list has rendered.
- to test whether the todos toggle changes the remaining items.
In the first test, we check the length of the list-items and the footer text, using the Jest
In the second test, we fire a click event on the list-items using the
fireEvent method in which the
toggleTodo method is fired that changes the todo's
completed parameter. This in turn changes our Footer components' text which we can again test using Jest assertions.
For the second example, to test the MobX class which we used in our component via
useContext, we need to create a dummy component and import our store as we would normally do in any other component.
If you view the
index.test.js file, a dummy component is created and it consumes our MobX class store using the
useContext hook. We just define the minimal UI we need to test according to our MobX store and write our tests.
The tests are same as the first example but the only change here is we create a dummy component to test our MobX store to mimic our main React component.
To view the output of the tests, you can open the tests panel at the bottom of the editor in which CodeSandbox runs the test automatically for you.
Feel free to fork the sandbox and play around with those tests and components. Thanks for reading!
Top comments (6)
Thanks for the series Ryan~.
I've just started learning MobX and the series will help from different perspectives.
And if you are doing a series, you can add the
seriestag without having to post it manually.
Changelog: Create Series of Posts
Thanks a lot Sung, I'll add the series tag :)
😃 Thanks, Ryan. 👊
Hi Ryan! How are you!
Thanks for the post. I Love it!
I'm studing modx to start a new project. So I would like to know if exists a better and modern way to share multiple stores with mobx. I dont know if my solution is good or not.
Here is my codesandbox with the example just to know if I'm in the right way.
I'm glad you loved the post!
Yes this the way we use multiple stores at our organization as well, but if you want interoperability among the stores, I would suggest creating a
RootStorethat holds all of the other stores and you could then call a method of a store from another one. Otherwise, it looks great!
Thanks very much for the reply. I really appreciate it.
Best regards! ;-)