Introduction
If you’re developing React applications, then you know that the React community has been bursting with new ideas and tools over the last year. When investigating any new technology to incorporate into a stack, we should consider if it either makes the workflow much easier, or solves a key problem. MobX and Enzyme are 2 new libraries in the React world that fit the bill. This sample todo application is incredibly easy to build with React and MobX, and in this article we’ll cover unit and UI/functional testing for React and MobX with Enzyme.
Code Smell in React
There’s no shortage of ways to build applications with React, but one thing is for sure — React shines the brightest when it is used as a reactive view layer sitting on top of the state of your application. If you use it for more than that, e.g. the UI is responsible for determining when and how to load data or the UI stores certain aspects of state, this can quickly lead to code smell.
In order to keep our React projects from growing messy, we need store the application state completely outside of the UI. This will not only make our application more stable, but it will also make testing extremely simple, as we can test the UI and the state separately.
Enter MobX
While frameworks and patterns like Flux, Redux and Relay give you a powerful way to manage the state of your application outside of the React view layer, they are complicated to set up, and it can take a while to make simple changes. One of the big reasons that MobX is quickly growing in popularity is the fact that it is very simple, which is nearly as simple as coding an object literal . That means you get a tremendous developer experience without sacrificing application stability.
What is Enzyme?
Enzyme will be our testing tool of choice, since it will allow us to test React components with jQuery-like syntax. This means functional and integration-style tests will be easy to write.
Accessing the Code:
- You can find the code for the simple todo application on GitHub: learncodeacademy/react-js-tutorials,
- The only requirement is Node.js version 4 or higher,
- To get it up and running, type
npm install && npm start, and - Visit the application on
localhost:8080.
Now, let’s get to testing this application.
Installing Enzyme and Jest
While Mocha works great with Enzyme, Jest is a little bit simpler to set up. Our 3 testing dependencies will be: jest for testing, babel-jest for transpiling our ES6, and enzyme for our functional React tests. Let’s clone the repository, then run npm install and also install those dependencies.
git clone [email protected]:learncodeacademy/react-js-tutorials.git cd react-js-tutorials/6-mobx-react npm install npm install --save-dev enzyme jest babel-jest
With these packages installed, Jest is fully configured out of the box. Babel will still work great as long as Babel is configured with a .babelrc file. Some people configure Babel in webpack.config.js, if that’s you, then you’ll need to move it to the .babelrc file so Jest and Webpack can both use the config.
We can now run jest and notice that no tests are found:
$ jest Using Jest CLI v14.1.0, jasmine2, babel-jest NO TESTS FOUND. 5 files checked. testPathDirs: /Users/cmn/Code/sandbox/react-mobx - 5 matches testRegex: __tests__/.*.js$ - 0 matches testPathIgnorePatterns: /node_modules/ - 5 matches
Unit Testing with MobX
Since MobX classes behave like object literals, testing is incredibly simple. Let’s begin by unit testing our TodoList store. Jest will run anything in the __tests__ directory by default, so let’s run these 2 commands to make the directory as well as our first test file.
mkdir __tests__ touch __tests__/TodoStore.test.js
Jasmine is the default runner for Jest, so we have access to describe, it, and expect without configuring anything. This means that we can get straight to writing our first test.
import { TodoStore } from "../src/js/TodoStore"
describe("TodoStore", () => {
it("creates new todos", () => {
const store = new TodoStore
store.createTodo("todo1")
store.createTodo("todo2")
expect(store.todos.length).toBe(2)
expect(store.todos[0].value).toBe("todo1")
expect(store.todos[1].value).toBe("todo2")
})
We created a new TodoStore, did some actions and observed the result just as if it were an object literal. The biggest advantage of MobX is its simplicity. Any changes we made would have been passed onto any observers as well. It’s important to note that we imported the store constructor { TodoStore } and not the default export, which is an instantiated store. This allows our next test to instantiate its own fresh store as well:
it("clears checked todos", () => {
const store = new TodoStore
store.createTodo("todo1")
store.createTodo("todo2")
store.createTodo("todo3")
store.todos[1].complete = true;
store.todos[2].complete = true;
store.clearComplete()
expect(store.todos.length).toBe(1)
expect(store.todos[0].value).toBe("todo1")
})
With unit testing in place, let’s use Enzyme to do some unit tests against our UI layer:
Unit Testing with React and Enzyme
Let’s being by making the file:
touch __tests__/TodoList.unit.test.js
Again, since MobX stores act just like object literals, we can test our React component by injecting it with any object literal to simulate a store state. We can use a single beforeEach to provide this state to all tests:
import { shallow } from 'enzyme'
import React from "react"
import TodoList from "../src/js/TodoList"
describe("TodoList", function() {
//don't use an arrow function...preserve the value of "this"
beforeEach(function() {
this.store = {
filteredTodos: [
{value: "todo1", id: 111, complete: false},
{value: "todo2", id: 222, complete: false},
{value: "todo3", id: 333, complete: false},
],
filter: "test",
createTodo: (val) => {
this.createTodoCalled = true
this.todoValue = val
},
}
})
//tests will go here and receive this.store
})
Notice how we do not use an ES6 arrow function for the beforeEach? We want to make sure that the value of this remains the same or this.store will not get passed on to our tests. When using context for tests, it’s a good idea to stop using arrow functions. However, we want to use an arrow function on our createTodo function, so we can set this.todoClicked and this.todoValue on the parent context when it gets called.
Now, adding a test is straightforward:
//don't use an arrow function, preserve the value of "this"
it("renders filtered todos", function() {
const wrapper = shallow(<TodoList store={this.store} />)
expect(wrapper.find("li span").at(0).text()).toBe("todo1")
expect(wrapper.find("li span").at(1).text()).toBe("todo2")
expect(wrapper.find("li span").at(2).text()).toBe("todo3")
})
We use Enzyme to create a wrapper for our store-injected-component, then we can ensure that all 3 todos printed correctly. Now, let’s add some tests that simulate user interaction on the component:
it("calls createTodo on enter", function() {
const wrapper = shallow(<TodoList store={this.store} />)
wrapper.find("input.new").at(0)
.simulate("keypress", {which: 13, target: {value: 'newTodo'}})
expect(this.createTodoCalled).toBe(true)
expect(this.todoValue).toBe("newTodo")
})
it("updates store filter", function() {
const wrapper = shallow(<TodoList store={this.store} />)
wrapper.find("input.filter").at(0)
.simulate('change', {target: {value: 'filter'}})
expect(this.store.filter).toBe("filter")
})
Enzyme allows us to easily simulate real JS events. The first argument of simulate is the event type, and the 2nd argument is the event object. Now, we have verified that the component calls createTodo when todos are created and also updates the filter when changed.
Integration Tests
Every now and then, you may find it useful to test that components work together the way they should. If you want to do this with React and MobX, you should simply replace the mock store with a real MobX store. Create TodoList.functional.test.js and add this:
import { shallow } from 'enzyme'
import React from "react"
import TodoList from "../src/js/TodoList"
import { TodoStore } from "../src/js/TodoStore"
describe("TodoList.functional", () => {
it("filters todos", () => {
const store = new TodoStore
store.createTodo("todo1")
store.createTodo("todo2")
store.createTodo("todo3")
store.filter = "2"
const wrapper = shallow(<TodoList store={store} />)
expect(wrapper.find("li").length).toBe(1)
expect(wrapper.find("li span").at(0).text()).toBe("todo2")
})
})
We are able to verify that the component behaves correctly with an actual MobX store as well. We can also verify that user interaction modifies the store appropriately:
it("clears completed todos when 'clear completed' is clicked", () => {
const store = new TodoStore
store.createTodo("todo1")
store.createTodo("todo2")
store.createTodo("todo3")
store.todos[0].complete = true
store.todos[1].complete = true
const wrapper = shallow(<TodoList store={store} />)
wrapper.find("a").simulate("click")
expect(wrapper.find("li").length).toBe(1)
expect(wrapper.find("li span").at(0).text()).toBe("todo3")
expect(store.todos.length).toBe(1)
})
Notice our expect at the bottom, we can verify that both the UI and the store changed appropriately when the “clear completed” link is clicked.