Getting riot.js setup for development isn’t too bad. But the combo of language features, testing tools, and riot templates made setting up the test environment a bit trickier than I expected. Here are some of the details.
Es2015 in Src
For this project, I am using riotjs, which is a React-like library for writing UI components. The library is designed to look for Riot components in
.tag files. These files look like HTML fragments, like:
1 2 3 4 5 6 7
I am using Babel to transpile the es2015 code in my project. I also want es2015 available in the tags. So, instead of just using the
babel-preset-es2015 preset, I’m using
babel-preset-es2015-riot. I also want default module export support, so I’m using
.babelrc file looks like:
1 2 3 4 5 6 7 8 9
For in-browser module support, I’m using webpack. So, for
.js, I’m using
.tag riot files, I’m using
riotjs-loader. The useful snippet for the loaders is here:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
Note that the riotjs plugin takes a query parameter for determining what type of code lives in the
<script/> section of the
Now a simple app might look like this:
1 2 3 4 5 6 7 8 9
It’s importing the top-most riot component for the app, called
1 2 3 4 5 6
1 2 3
Note that the tag file imports other tag files. To me, this seems to be the right place to do this, since the parent tag has dependencies on children tags. But it presents a problem that requires extra configuration in the test environment.
Es2015 in Test
In test land, we are using ava as our test runner. We configure it in the
1 2 3 4 5 6 7 8 9 10 11 12 13
A few explanations about the test setup above…
Ava supports es2015 out of the box. But it also allows you to specify your own
.babelrc configuration using the ‘inherit’ value.
files, we are telling ava to find all the specs in the
src/ subdir that have the
.spec.js filename suffix.
require section is used to specify what code needs loaded before the specs run:
babel-register- so we can use es2015 in test setup code.
./test/utils/node-extensions- so we can tell node (running ava) how to load the
.tagfiles that it encounters (remember, we don’t have webpack in this test environment).
./test/utils/dom- sets up a jsdom for doing our UI test
node-extensions.js file is pretty interesting. It is providing node a new function for how to handle the
.tag files. For these files, we’ll compile using the riot compiler and then compile that output using babel. In the end, we should have ready code. You’ll also notice that this custom file loader requires that we load up our
.babelrc file manually because we’re acting outside of ava at this point.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
Next, we have our dom setup, which is pretty straightforward jsdom:
1 2 3 4 5 6 7 8
Now we have a dom with a body tag we can render into, so let’s try to test out our
app.js render code – finally, the test:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
So much work for such a benign test. :)
It’s a cool combo of technologies. But it takes a fair bit of wrangling and that interesting bit of
node-extensions.js code to get it working.
Have you used this combo of tech before or something similar? Any better setups that you’ve found?