Add scaffolding for running tests in React. Write a basic React test for the sidebar.

[biancadanforth]

For normal web applications (per mythmon and rdalal), Jest and Enzyme seem to be the recommended stack to use.

However, for WebExtensions, it can be hard to get things into the right context. Mythmon has only ever been able to use mochitest for that.

I have asked k88hudson from the Activity Stream team, as I believe they use React and were/are a system add-on developed out of the tree. I have also asked in IRC #webextensions. I will post anything I find here.

[biancadanforth]

TL;DR: Looks like Jest and Enzyme are winners.

Per k88hudson on the Activity Stream team:

... yes we do [use React]
currently we’re using enzyme + karma + mocha
jest is a good option that requires less customization/setup
we use stubs/mocks for unit tests and mochi tests for integration testing
so we use sinon in our unit tests for that, as well as a custom setup for providing global overrides
these are all the react tests here https://github.com/mozilla/activity-stream/tree/master/test/unit
we have some docs as well
https://github.com/mozilla/activity-stream/blob/master/docs/v2-system-addon/unit_testing_guide.md
to be honest i’ve been thinking about switching to jest since it’s a more conventional setup

Also, she mentioned the DevTools team uses Jest to test its React components, and recommended talking with jlaster.

I am going to do some Jest tutorials and try to get a simple Jest test up and running for our sidebar. Pending success/failure of that, I may follow up with jlaster.

[biancadanforth]

After getting the test environment set up for using Jest/Enzyme in our React + Webpack WebExtension, we encountered a number of limitations:

1. Jest runs (easily) in Node.js only. While efforts have been made to run Jest in the browser, it is not a priority for Facebook. It would be ideal if we could run tests in the browser (Firefox's implementation of JavaScript), since that's where our code will ultimately run when deployed.
2. Using Jest/Enzyme alone would only allow us to write in-app unit tests; we could never test any interactions with the browser itself. For that, we would need Marionette and Mochitest, most likely.
3. Minor issue, but we set up a "commerce" alias in Webpack for our source directory, and we had to duplicate that alias in the Jest config in package.json. In general, Jest's name mapping was brittle (i.e. order of the alias versus the css mock mattered).

Osmose is investigating an alternate, and more likely solution, which is to use Mocha, a JS test framework that can be run in the browser for unit testing, along with Marionette, an automation driver for Firefox and Mochitests (chrome-privileged JS framework for integration testing with Firefox).