METEOR + REACT

A step-by-step guide
to building a
complete app

Ken Rogers
Ft. Collins, Colorado
March 2016

Ken Rogers 2016

FOREWORD

Table of Contents
Introduction.....................................................................................................................................................1
What to Expect from this Book...........................................................................................................................2
Prerequisites.........................................................................................................................................................2
Mantra...................................................................................................................................................................3
Working Code for this Application......................................................................................................................3

Application Architecture.................................................................................................................................4
Core Parts of a Meteor + React App...................................................................................................................4
Planning the Impossible List App.......................................................................................................................5
Structuring Our Directory.....................................................................................................................................6
Core Module..........................................................................................................................................................9
Context................................................................................................................................................................10
Outside the Client...............................................................................................................................................11
Wrapping Up.......................................................................................................................................................16

Unit Testing................................................................................................................................................... 17
Wrapping Up.......................................................................................................................................................19

Building Our Prototype.................................................................................................................................20

Assigning A Due Date........................................................................................................................................25
Marking an Item Complete................................................................................................................................25
Progress Tracker................................................................................................................................................26
Wrapping Up.......................................................................................................................................................28

Building the User System.............................................................................................................................29

Container Components......................................................................................................................................32
Wrapping Up.......................................................................................................................................................38

Creating Categories......................................................................................................................................40
Container Components......................................................................................................................................40
Wrapping Up.......................................................................................................................................................46

Creating Our List Items................................................................................................................................47

List Item Containers...........................................................................................................................................47
Wrapping Up.......................................................................................................................................................56

Adding Details to Our Items.........................................................................................................................57

Wrapping Up.......................................................................................................................................................59

Setting Up the Progress Tracker..................................................................................................................60

Wrapping Up.......................................................................................................................................................61

Deploying with Heroku.................................................................................................................................62

Getting Set Up with Heroku...............................................................................................................................62

Wrapping Up and Next Steps.......................................................................................................................64

Meteor + React

Introduction

Page 1

INTRODUCTION
Meteor is an amazing framework. We are reaching an age in web development where we can do things
in a fraction of the time that we used to need. Apps are snappy, responsive, real time, and can make
for an amazing experience for the end user. But with great power, comes great responsibility, and
these amazing tools are not without their drawbacks.
Meteor is still relatively young, and has a lot of fuzzy areas when it comes to development best
practices, like how to structure an application, scalability, integrating with React, and more. These are
starting to be resolved, slowly but surely.
This book is my contribution to the world of Meteor and my attempt at clearing up some of the fog
involved in developing with it. With the recent release of Meteor 1.3, and the rise of React as the best
option for the front end of Meteor, a solid, go-to guide was needed to help glue all the pieces together
and clear up the confusion. The book you are reading is meant to be a guide to show you the best way
to develop applications with Meteor and React. Here are some of the things we'll cover:
Application architecture
Tips on migrating from Blaze to React
Effectively integrating Meteor and React together
Setting up a unit test suite
Creating a smooth, fluid UI with React-Bootstrap
Best practices for a production-quality app
Meteor has a lot of big changes coming with 1.3, for more information on this change, check out this
forum post.
After going through this book, you'll be armed with all of the knowledge you need to start creating
some amazing applications with Meteor and React. Of course, you shouldn't end your learning at this
book. Take what you learn here and use it to start creating things on your own and expanding your
experience. Never stop learning.

Ken Rogers 2016

Page 2

What to Expect from this Book

Meteor + React

What to Expect from this Book

In Meteor + React, we'll be building a complete application for managing an Impossible List. An
Impossible List, if you aren't familiar, is basically a bucket list on steroids. It's a way to track all of the
amazing things you want to do with your life.
The book is laid out in a step-by-step format, so we'll build the application from start to finish, covering
all the important concepts along the way. By the end of the book, you'll have gone from nothing to a
complete, working application.
It's best if you read this book all the way through from start to finish. I'll have all of the code typed out
as we build it, and I highly encourage you to type everything out yourself, don't copy and paste. And
after you type it out, review each line to be sure you know exactly what it is doing. This is the only way
you'll really absorb the information.
There will also be GitHub commits included for each chapter, so you'll be able to reference the code
and see if it matches yours. This is super helpful when you are trying to debug and can't figure out
what the heck is going on.
We'll be covering three main technologies throughout this book: Meteor 1.3, React, and ReactBootstrap. While building out our app using these frameworks, we'll also talk about why we are doing
what we're doing, so that you can take what you learn and apply it to real world projects.

Prerequisites
Although you don't need to be an expert in anything to read this book, there are a few things you
should be familiar with.
1. HTML, CSS, and JavaScript - You need to know these three basic technologies before
getting into Meteor development. If you aren't familiar with them, take the free course
in HTML at General Assembly and then move on to the next two.
2. Basic familiarity with Meteor - Once again, you don't need to be an expert, and we'll be
learning a lot in this book, but it will be helpful if you have at least a basic
understanding of how Meteor works. These two free tutorials should be plenty: Your
First Meteor Application and Your Second Meteor Application.
3. Basic familiarity with React - Finally, you should have a rudimentary knowledge of how
React works. These two tutorials should be plenty for this part: React Introduction and
A React Primer for Meteor.
Ken Rogers 2016

Meteor + React

Prerequisites

Page 3

Alright, once you have those under your belt, you are all set to make your way through this book.
I was going to include a chapter on the differences between Blaze and React, and migrating from
Blaze to React, but some very smart people have already done an incredible job of that, so if you are
curious about those things, I am directing you to this Meteor Chef article and this series by Sacha
Greif. They cover it in great detail and do a better job of discussing the subject than I could.

Mantra
One of the biggest focuses of this book is the Mantra specification created by Arunoda. Mantra is an
application architecture system for Meteor that focuses on high maintainability and being future proof.
The point of Mantra is to provide a solid and durable system for developing Meteor applications.
It consists of certain conventions for structuring our project and files, and is based off of Meteor 1.3
and React, taking full advantage of module support. Read more about it here and check out the spec
to get all the juicy details here.

Working Code for this Application

If you'd like to see a sample of the final, working code for this application. You can visit the GitHub
repository here: https://github.com/kenrogers/impossiblelist. GitHub commits for individual chapters
are coming soon.
Now let's get started by discussing application architecture and getting our structure created.

Ken Rogers 2016

Page 4

Application Architecture

Meteor + React

APPLICATION ARCHITECTURE
One of the big questions surrounding Meteor is how to best set up our applications in order to create a
well-organized project that can be maintained and changed easily. Since Meteor is a platform, and not
a framework, there is no set of standards around how to do this. There are however, some best
practices that are emerging that are starting to change that. In this chapter, we'll look at these best
practices, discuss why you should structure your applications this way, and then set up our Impossible
List project to follow them.
In my opinion, one of the most important aspects of developing an application is the organization of
the code. From the very beginning, it dictates the quality of the app and the happiness of the
developer.
This is even more true with something like Meteor, where we have the freedom to do basically
whatever we want, which can lead to a lot of potential issues. Throwing in a component system like
React can help make it more organized, but it's still difficult to figure out the best way to handle it.
In order to create an application with a great architecture, we need to look at the aspects of Meteor
and React and figure out how to make them work well together. Let's go through a high level overview
of the necessary parts of a Meteor + React app, and then talk about the best ways to organize those
parts.

Core Parts of a Meteor + React App

Much of our application structure will be dictated by how React works. React is component-based,
which means every main section of our app is separated out into it's own component. For example, in
our app, say we had a side navigation bar, a main dashboard, and four sections of that dashboard that
all have different functions. The side navigation and main dashboard would be wrapper, top-level
components, and then we would also have a separate component for each of those items underneath.
These are different than container components. What I mean when I say wrapper component, is that it
is just an outer level component that has another, smaller component within in.
We want the different pieces of our application to be separated and loosely coupled, so that they can
be reused if desired.

Ken Rogers 2016

Meteor + React

Core Parts of a Meteor + React App

Page 5

A container component is different, it is a component that is in charge of fetching the data for a
corresponding UI component.
Note

We'll talk more about container components in a future chapter, they are a fundamental concept to
understand when developing with Meteor and React.
This hierarchical structure gives us a few benefits.
1. Our code is organized. Having every main piece of our app separated out like this makes it very
easy to find which part of our app is doing what. It separates everything out so that each
component is responsible for doing its job, no more no less.
2. It makes our app modular. We'll start talking about modules in a minute, they are a core aspect
of Mantra. But the bottom line is that building out our application with a hierarchical, modular
structure makes it much easier to move things around, add, and remove things without
breaking other things. Each part of our app is loosely coupled with the other parts, so we can
adapt as necessary.
Mantra uses the idea of modules to structure apps at a high level. You can think of modules as the big
parts of the application, the main features. Within these modules we can put our components to build
out sections of our app. We also have one core module, that handles a lot of the application-wide stuff,
like routes. Let's begin to plan out our Impossible List app, and then break the features out into
modules.

Planning the Impossible List App

The core feature of our application is going to be the ability to add and track things that we want to do
with our lives, so we can consider how to provide for the activities.
We need a user system, so users can sign up, log in and out, and keep track of their
list items.
We need the item management system, the part of the app that will be in charge of all
of the interactions with the list items.
Those are the two main features of our application. Larger apps may have more modules, and smaller
apps can get away with just one main core module. For our purposes, two is great.
How to structure modules really depends on the application itself and your judgment and personal
preferences.

Ken Rogers 2016

Page 6

Planning the Impossible List App

Meteor + React

Now that we know what the two main features of our app are, let's break these down further to
discover what our components should be. We'll start with the user system. What functionality do we
need to create a fully functioning user system?
Registration
Login
Logout
These are the three functions we need for a basic user system.
How about for the item management module? This one is a bit more complicated, but we can break it
down to simplify it.
List of items
Individual items
Form to add a new item and edit existing ones
Progress tracker to see how many items we have complete
Method to mark items as complete
A list of categories
A form to add new category names
A form to set an optional due date for our items
And now we have a list of the main components our item management module will contain.
Pay attention to the hierarchical organization of this structure, it will be very important to keep in mind
as we progress through the book. This concept of organizing everything this way is central to
developing great apps with Meteor and React.
We'll get into the individual child components that will make up these main components one at a time
in later chapters, as we build them. For now, let's move on to the directory structure.

Structuring Our Directory

A core aspect of Mantra is the directory structure. It focuses heavily on the client folder, so that's
where we'll start.
Before we do anything, we need to actually get a Meteor project set up. Let's do that. As of this
writing, Meteor 1.3 is still in beta, so we'll need to do something a little different to work with it. Open
Ken Rogers 2016

Meteor + React

Structuring Our Directory

Page 7

up your terminal and cd into a directory where we can setup a project folder to work in. Now run this
command to get Meteor 1.3 set up.
meteor create --release 1.3-beta.11 impossible
This will get the impossible project set up, and right away we can remove the default files that
Meteor creates.
rm impossible*
Now, we need to get some of the npm packages we'll need to get this all up and running. You could
install them all yourself, but that would be a bit tedious, so instead just create a package.json file in
the root of your project and copy this code into it.
{

"name": "impossible",
"version": "0.1.0",
"scripts": {
"testonly": "mocha client/**/tests/**/*.js --compilers js:babel-core/register",
"test": "npm run testonly",
"test-watch": "npm run testonly -- --watch --watch-extensions js,jsx"
},
"devDependencies": {
"babel-core": "6.x.x",
"babel-plugin-react-require": "2.x.x",
"babel-polyfill": "6.x.x",
"babel-preset-es2015": "6.x.x",
"babel-preset-react": "6.x.x",
"babel-preset-stage-2": "6.x.x",
"babel-root-slash-import": "1.x.x",
"chai": "3.x.x",
"enzyme": "1.x.x",
"eslint": "1.10.x",
"eslint-plugin-react": "3.15.x",
"mocha": "2.x.x",
"react-addons-test-utils": "^0.14.6",
"sinon": "1.17.x"
},
"dependencies": {
"domready": "^1.0.8",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"mantra-core": "^1.2.0",
"react-mounter": "^1.0.0"
},
"private": true

Then save it and run npm install to get all the packages you need. If you like you can go off and
research each of these packages on your own to get a feel for what they do.
The first section of this file, the scripts section, tells our app how to handle testing. The testonly line
is telling npm to look in any files within a tests folder on the client, and to use the babel compiler to
compile the ES2015 that we are using.

Ken Rogers 2016

Page 8

Structuring Our Directory

Meteor + React

The next line, test, is the command that runs when we run npm test from the command line. The
test-watch statement is the same concept, but for when we run npm test-watch.
The devDependencies object contains a list of packages that we need for development, and
dependencies contains a list of packages we need for our app to function.
We'll be adding more packages as we go, but these are what we need to get started.
You'll also want to modify your Meteor packages file to remove autopublish and insecure, and add
these at the end.
kadira:flow-router-ssr
reactive-dict
audit-argument-checks
check
random

Next, let's create the necessary files and folders. First create the client folder and cd into it.
mkdir client && cd client
Now that we are in here, we can create our top level directory structure, which will consist of two
folders and one file.
mkdir configs modules
touch main.js
The configs directory will contain all of the application-wide configuration for your app. This is where
we'll put our Application Context, which is a file containing variables that are available to your entire
app. We'll talk about this more when we create the actual file.
The modules directory is where we'll put each module of our app in it's own directory. So for our app
we'll create three more directories: core, users, and items.
mkdir modules/core modules/users modules/items
These modules divide our app into its main sections. Within these modules we have some more
directories, which will handle most of the functionality for our app. We're going to finish up this section
by creating these folders, then creating the directory structure for the server side of our app. After that,
we'll start actually building some files.
Let's first create these files for the core, users, and items modules.

Ken Rogers 2016

Meteor + React

Structuring Our Directory

Page 9

cd modules
mkdir core/actions core/configs core/components core/containers
mkdir users/actions users/configs users/components users/containers
mkdir items/actions items/configs items/components items/containers
We also need to give each of our modules an index file.
touch core/index.js users/index.js items/index.js
These are responsible for loading all of the necessary files we need for each of our modules. We'll add
to these as we add to our app, for now we only need to fill out the index.js file for the core module.
Open that up and put in this code.
import routes from './routes.jsx';
export default {
routes
};

All we're doing here is pulling in our routes (which we'll add in a minute) to use in this module.
Before we get into what each of the module's directories is responsible for, let's first get a grip on what
the core module does.

Core Module
The core module is responsible for the core client-side code. This is where we put things like our
routes, it is also loaded before any other modules. We'll also use the core module to create containers
and components that relate to the entire application, like our main layout and our navigation
components. Think of the core module as the main module, and the others as feature modules. If you
have a piece of your application that doesn't fit into another module, and is used throughout the
application, it should probably go in your core module.
We'll get into the specifics of the actions, configs, components, and containers directories as we
use them.

Ken Rogers 2016

Page 10

Context

Meteor + React

Context
Now that we've got our directory structure set up, let's create our context file. It will be placed within
the client/configs directory. Get back to the root of the project.
cd ../..
touch client/configs/context.js
Let's talk about this weird context.js file that we have.
The context file is actually simpler than it seems at first glance. The context file is a file that returns an
object containing a bunch of stuff we need for our app. Then we take all that stuff and initialize
everything in main.js.
What kind of 'stuff' am I talking about? Here are a few things that are typically included in a context
file:
Our collections
Core ES2015 modules we need (Meteor, FlowRouter, ReactiveDict, Tracker)
That's basically it, then we just export these out and import them in our main.js file. Let's do that
now. Open up the context.js file we made and add the following code.
import
import
import
import
import

* as Collections from '/lib/collections';

{Meteor} from 'meteor/meteor';
{FlowRouter} from 'meteor/kadira:flow-router-ssr';
{ReactiveDict} from 'meteor/reactive-dict';
{Tracker} from 'meteor/tracker';

export default function () {

return {
Meteor,
FlowRouter,
Collections,
LocalState: new ReactiveDict(),
Tracker
};
}

Keep in mind we haven't created some of these files yet, so our app isn't going to work just yet. We'll be
creating everything we need to have the first bits of a functioning app in this chapter.
In the main.js file, place the following code:

Ken Rogers 2016

Meteor + React

Context

Page 11

import {createApp} from 'mantra-core';

import initContext from './configs/context';
// modules
import coreModule from './modules/core';
import usersModule from './modules/users';
import itemsModule from './modules/items';
// init context
const context = initContext();
// create app
const app = createApp(context);
app.loadModule(coreModule);
app.loadModule(usersModule);
app.loadModule(itemsModule);
app.init();

Once again, a lot of these files don't exist yet, but we'll get to them soon. The whole idea behind Mantra
is to have single entry points for our application, so the point of main.js is to take all of our code and
create the application itself right here. We're importing our modules and all the core information we
need and initializing the entire app from this one file.
The app.loadModule() function is a function included with mantra-core that loads each of our
modules into our app.
Now we're starting to get some of the core, high level aspects of our app in place. Let's continue that
trend and get some of the folders and files outside of our client directory set up, then we'll return and
set up our routes file and our first component.

Outside the Client

Mantra has a heavy focus on the client side, so our server side will be relatively light. We'll put things
like publications and methods in there. Let's get that structure set up, and then we'll create our
collections in a lib directory.
mkdir server server/configs server/publications server/methods
touch server/main.js
You'll notice we also created a main.js file for our server. The server side works the same as the
client side, with a single entry point gathering all of the modules and initializing them.
We aren't going to put anything in these folders just yet, but we will go ahead and set up our main.js
file. Open it up and place the following code.

Ken Rogers 2016

Page 12

Outside the Client

Meteor + React

// import publications from './publications';

// import methods from './methods';
// publications();
// methods();

Since we don't actually need these files yet, we've left them commented out. We'll uncomment them
later when we actually need it.
Next up, let's set up our collections.
mkdir lib
touch lib/collections.js
And for now we'll just create the one collection for our items.
import {Mongo} from 'meteor/mongo';
export const Items = new Mongo.Collection('items');

Notes

Wondering where this 'meteor/mongo' we are referencing is coming from? When we installed the current
version of 1.3, we also installed the ecmascript package, which allowed us to import packages from
Meteor. Whenever you see something imported from 'meteor/[SOMETHING]', it is coming from Meteor
itself.
Okay, we're starting to get somewhere with the initial project setup, now let's make some routes. Our
routes will go in our core module.
touch client/modules/core/routes.jsx
Now let's make the actual routes. For now, we'll only make one, the root path. We'll add more later as
we build out more of the app.

Ken Rogers 2016

Meteor + React

import
import
import
import

Outside the Client

Page 13

React from 'react';

{mount} from 'react-mounter';
Layout from './components/MainLayout.jsx';
ItemList from '../items/components/ItemList.jsx';

export default function (injectDeps, {FlowRouter}) {

const MainLayoutCtx = injectDeps(Layout);
FlowRouter.route('/', {
name: 'items.list',
action() {
mount(MainLayoutCtx, {
content: () => (<ItemList />)
});
}
});
}

At the top of the routes file we're just importing the ES2015 modules we need to actually create our
routes. Then we are importing our layout components, which we have not created yet, but are about to.
So what's this injectDeps and FlowRouter all about?
This is how we create routes in Meteor 1.3. We are exporting a function that takes this injectDeps as
a parameter. injectDeps is used to inject dependencies into a React component or container. In the
above example, we need the MainLayout component, so we are injecting it by using the const
MainLayoutCtx = injectDeps(Layout); line of code.
Then below that, when we create the actual route to ItemList, we are mounting that dependency. The
mount() function comes from the react-mounter package. It is similar to react-layout, but uses npm
better and is well suited for Meteor 1.3.
If you'd like to learn more about how it works, check out the docs here:
https://github.com/kadirahq/react-mounter. But basically this route is just saying render our
MainLayout, and then stick the <ItemList /> component inside of it. We don't need to worry about
creating a root node for React to attach to, react-mounter does that for us.
To make this clearer, let's make our components. First, create a MainLayout.jsx file inside the
components directory of the core module.
touch client/modules/core/components/MainLayout.jsx
And put in the components code.

Ken Rogers 2016

Page 14

Outside the Client

Meteor + React

import React from 'react';

const Layout = ({content}) => (
<div>
<header>
<h1>Impossible List</h1>
</header>
<div>
{content()}
</div>
</div>
);
export default Layout;

Sweet, our first component! Why does it look so freaking weird? Because we are using ES2015. First,
we are just importing React, which we need to do in every component.
Next, we are creating a constant, which is a new type of variable in ES2015, learn more about it here if
you don't know what it is. Then we are passing in our content variable to the component so that it
knows what to render. This variable comes from the route we defined, and is currently set to be out of
the <ItemList /> component.
That little {content()} bit in the middle is where the <ItemList /> component we passed to our
route will show up. Let's create that now. We're just getting our project set up for now, so we'll create a
simple placeholder component.
First create the file in the components directory of the items module.
touch client/modules/items/components/ItemList.jsx
Note

In case you're concerned, we'll be refactoring this to use a container component soon ;)
Now let's add the actual component to ItemList.jsx.
import React from 'react';
const ItemList = ({content = () => null }) => (
<div>
<p>This is where the items will be.</p>
</div>
);
export default ItemList;

Let's create our missing modules so we can get this thing running. We won't be doing anything to the
files yet, we'll get them set up later when we actually need to use them.

Ken Rogers 2016

Meteor + React

Outside the Client

Page 15

touch server/publications/index.js
touch server/publications/items.js
Here we are creating an index file, which will be in charge of pulling in all of our publications, and we
made a file for our specific items publications. We'll do the same for our methods.
touch server/methods/index.js server/methods/items.js
Since these have no content, they don't actually do anything yet, but we need them to be present for
our app to run.
Now let's fire up this app and see what we get!
meteor
Woot! If you've done everything right, you should get a super basic app up on the screen.

Illustration 1: Our first run of basic app.

Ken Rogers 2016

Page 16

Wrapping Up

Meteor + React

Wrapping Up
That was a lot to go over. But we now have the skeleton of a Meteor 1.3 app that uses React and
follows the Mantra spec. From here on out, it will be super easy to add new components to our
application. Make sure you really understand how this application is structured. This can be somewhat
slippery at first, but getting a firm grasp on the concept of how Meteor 1.3 apps are organized will help
you build a solid foundation for going forward with developing them.
Next up, we're going to go over how to integrate testing into our application.

Ken Rogers 2016

Meteor + React

Unit Testing

Page 17

UNIT TESTING
Testing is another one of those fuzzy areas with Meteor. But luckily with tools like Mantra we can
begin to get a feel for how it should be done. In this chapter we'll get a brief introduction to how testing
should be done in Meteor. We aren't going to implement testing for every single aspect of this
application, because testing on its own is a huge subject that exceeds the scope of this book, but we
will go through a quick introduction and provide some further resources for learning.
This chapter is not meant to be a full fledged tutorial on testing with Meteor, it is simply meant to be
an introduction and to get you used to the process of testing with Meteor 1.3 using ES2015 modules. I
encourage you to go out and research Meteor testing further after going through this chapter.
For our testing, we'll be using Mocha with Chai and Sinon. Let's get these npm packages installed and
then we'll start setting everything up.
npm install --save-dev mocha chai sinon sinon-chai
We can create tests for our actions, UI components, and containers, which we'll set up in this chapter.
Now normally we would have a tests directory for our project, but we're going to split up our tests by
module. For this first example, we'll be setting up a super simple test for our items module, so let's
create the proper directories and files.
First we'll set up a UI component test, so we'll create a tests folder inside the component directory of
the items module.
mkdir client/modules/items/components/tests
Now let's create the ItemList.js file that we'll use for our tests. This is the standard naming
convention we'll use for testing in this book; we'll create a test folder in the same module sub-directory
as whatever we are testing, and name the file the same thing, only with a .js extension instead of a .jsx
extension.
touch client/modules/items/components/tests/ItemList.js
Before we write the actual test, let's do a bit of setup.

Ken Rogers 2016

Page 18

Unit Testing

Meteor + React

Add a new file called .babelrc to the root of your project and add the following to it.
{
}

"presets": ["es2015", "stage-2", "react"],

"plugins": ["react-require", "babel-root-slash-import"]

This is what allows us to compile our JSX into JavaScript before it gets to Mocha. If we left this part
out, we would get syntax errors.
Now if you run npm test we'll see that we have 0 tests and our test suite is working properly. Now we
are ready to actually make some tests.
We're going to be using a technique called shallow rendering for our tests. Basically this just means
that we can test each individual React component in an isolated way, without having to worry about
what any child components are doing. Shallow rendering acts as a temporary holder for our
components, so we can test them without having to actually render them.
Shallow rendering is great for functional stateless components, which our app will be made of, so it is
perfectly suited for our purposes.
This helps us keep everything separated and contained, which is a core aspect of Mantra and an
essential task when developing Meteor apps.
First up, let's just add a simple test to see if our ItemList component is rendering what we think it is.
Add the following to your ItemList.js file within the tests folder.
const {describe, it} = global;
import {expect} from 'chai';
import {shallow} from 'enzyme';
import ItemList from '../ItemList.jsx';
describe('items.components.itemList', () => {
it('should display the text', () => {
const el = shallow(<ItemList />);
expect(el.find('p').text()).to.be.match(/This is where the items will be./);
});
});

In this test, we are first importing everything necessary to run the test. That includes that packages we
need to run the test suite as well as the actual component we are testing.
Next we are setting up a describe block. This describe block should correspond to a specific
component, and we'll have one describe block for each component, as well as one for each action
when we get into using them.

Ken Rogers 2016

Meteor + React

Unit Testing

Page 19

Note

Notice the naming convention we are using here. We're using dot syntax to identify our current
component by module first, then the fact that it is a component, then the name of the component. We'll
use this convention from here on out.
Next, we're setting up our actual test case. We're saying that our ItemList component should have a p
tag with text equal to the string "This is where the items will be.", which, if you check our
component, is exactly what we have set up.
That means if you go ahead and run npm test, you should get a passing result.

Illustration 2: Running our first test.

Wrapping Up
And with that we have our super simple test set up. The main goal of this chapter was to get you
introduced to how to set up a test suite in a Meteor 1.3 application. Now that you know how to set up
a test suite in Meteor 1.3 using ES2015, you can do some more in-depth research on actual testing
practices with Mocha, Chai, Sinon, or any other testing framework you choose. I'm not an expert on
testing, and it is a large subject which should be explored and studied on its own. Here are a few great
resources to get you started.
Unit Testing with Meteor 1.3
JavaScript Unit Testing with Mocha, Chai, and Sinon (Paid $9)
Mantra Sample App - This sample blog app uses Mantra and has some good
examples for creating tests using the Mantra spec.
Next up we're going to get in to some of the fun stuff. We'll get React-Bootstrap installed and start
working on setting up a prototype for our application.
Ken Rogers 2016

Page 64

Wrapping Up and Next Steps

Meteor + React

WRAPPING UP AND NEXT STEPS

I hope you enjoyed Meteor + React and that it helped you learn how to develop applications using
Meteor 1.3 and React in a maintainable way.
Mantra is a huge help to the community, and with the advent of Meteor 1.3 and module support, it will
pave the way to developing amazing things with Meteor and React.
The community is growing and changing rapidly, and I think it's a great time to be a Meteor developer.
By experimenting and learning now, you are putting yourself ahead of the curve for Meteor
development, and you'll be at the forefront when it starts to gain more popularity and is used in more
production apps.
For now, keep building and learning. Keep up with current events in the forum and on the blog. Keep
your skills sharp and hack away on different projects.
As 1.3 becomes more stable things will change, so keep up with those changes and learn as you go.
Here are a few things I'm working on adding to the book right now:
A private Slack group for readers to interact and get help with the content
Deployment solutions (Galaxy, Heroku, Modulus, Docker)
More Testing
More complex features
A more robust user system
Better Error Handling
Pagination
Better design and formatting for the book
And more
My goal with this book was to give people an introduction to Meteor 1.3, React, and Mantra, and I hope
I gave you the knowledge to get started developing with these great development tools. There is
always more to learn, so keep at it!
Meteor 1.3 is still in beta, and as things are changed and finalized, this book will be updated with new
best practices and the best way to develop apps with it. If there is something you were hoping to learn
Ken Rogers 2016

Meteor + React

Wrapping Up and Next Steps

Page 65

that wasn't in this book, you can let me know at ken@kenrogers.com, and I'll try and include it in a
future update.
Thanks so much for your support and I can't wait to hear what you thought of the book!
If you have any questions or comments about the book, or about anything else, please get in touch
with me at ken@kenrogers.com.

Ken Rogers 2016