Using MobX with React Hooks

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)

Using MobX with React Hooks

Ryan Dsouza ・ Jan 5 '19

#mobx #react #hooks #javascript

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,

1. to check whether the list has rendered.
2. 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 expect assertions.

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!

Comments

[Sung M. Kim]

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 series tag without having to post it manually.

Changelog: Create Series of Posts

Ben Halpern

#changelog#meta

[Ryan Dsouza]

Thanks a lot Sung, I'll add the series tag :)

[Sung M. Kim]

😃 Thanks, Ryan. 👊

[Christian Nascimento]

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.

Best regards

[Ryan Dsouza]

Hey Christian!

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 RootStore that holds all of the other stores and you could then call a method of a store from another one. Otherwise, it looks great!

[Christian Nascimento]

Thanks very much for the reply. I really appreciate it.

Best regards! ;-)