diff --git a/6-mobx-react/__tests__/TodoList.functional.test.js b/6-mobx-react/__tests__/TodoList.functional.test.js
new file mode 100644
index 00000000..463dc957
--- /dev/null
+++ b/6-mobx-react/__tests__/TodoList.functional.test.js
@@ -0,0 +1,40 @@
+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()
+
+ expect(wrapper.find("li").length).toBe(1)
+ expect(wrapper.find("li span").at(0).text()).toBe("todo2")
+ })
+
+ 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()
+
+ 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)
+ })
+})
diff --git a/6-mobx-react/__tests__/TodoList.unit.test.js b/6-mobx-react/__tests__/TodoList.unit.test.js
new file mode 100644
index 00000000..af5aa349
--- /dev/null
+++ b/6-mobx-react/__tests__/TodoList.unit.test.js
@@ -0,0 +1,51 @@
+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
+ },
+ }
+ })
+
+ //don't use an arrow function, preserve the value of "this"
+ it("renders filtered todos", function() {
+ const wrapper = shallow()
+
+ 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")
+ })
+
+ it("calls createTodo on enter", function() {
+ const wrapper = shallow()
+
+ 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()
+
+ wrapper.find("input.filter").at(0)
+ .simulate('change', {target: {value: 'filter'}})
+
+ expect(this.store.filter).toBe("filter")
+ })
+
+})
diff --git a/6-mobx-react/__tests__/TodoStore.test.js b/6-mobx-react/__tests__/TodoStore.test.js
new file mode 100644
index 00000000..25b5a338
--- /dev/null
+++ b/6-mobx-react/__tests__/TodoStore.test.js
@@ -0,0 +1,25 @@
+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")
+ })
+
+ 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")
+ })
+})
diff --git a/6-mobx-react/package.json b/6-mobx-react/package.json
index bbb08817..2fe4412c 100644
--- a/6-mobx-react/package.json
+++ b/6-mobx-react/package.json
@@ -16,15 +16,22 @@
"react-dom": "^15.3.0"
},
"devDependencies": {
+ "babel-jest": "^14.1.0",
"babel-loader": "^6.2.4",
"babel-plugin-transform-class-properties": "^6.10.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"css-loader": "^0.23.1",
+ "enzyme": "^2.4.1",
+ "jest": "^14.1.0",
"react-addons-test-utils": "^15.3.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
+ },
+ "jest": {
+ "automock": false,
+ "scriptPreprocessor": "/node_modules/babel-jest"
}
}