Webpacker: Testing

[jensljungblad]

Interested to hear thoughts about tests using webpacker and rails. I noticed there is no config for the test env for instance.

Are there any conventions? Like where to put tests? We had them in spec/javascripts before but now I'm wondering if I'm meant to put them in app/javascript. Also, should tests be bundled to its own bundle, app/javascript/packs/tests.js or would you bundle the tests together with the rest of the app code but skip them in production or something?

[joerodrig]

https://github.com/rails/webpacker/issues/72 should help with some of your questions. There never really has been a clear convention around where to put your client specs, but I tend to follow the Jest convention with my __tests__ folder. I keep that at app/javascript/__tests__

[jensljungblad]

@joerodrig How have you configured webpack with regards to the app/javascript/__tests__ folder?

[joerodrig]

@jensljungblad https://github.com/joerodrig/demo-webpacker-react/commit/ecdf8d1e409ff7e56589376a109b4554fbfe1888

[jensljungblad]

Ah, unfortunately we're using Mocha and not Jest! I was hoping it would be possible to bundle all the tests in a public/packs/tests.js pack and pass that to Mocha: $ mocha public/pack/tests.js. It works, but the method I'm using to require all test files from my test folder makes web pack recompile all tests no matter what files changed, which is slow.

My app/javascript/packs/tests.js file currently looks like this:

let testsContext = require.context("../../../spec/javascript", true, /_spec.?(coffee|cjsx)$/);
testsContext.keys().forEach(testsContext);

Doing it like this instead works better, Webpack only compiles changed files:

require("../../../spec/javascript/foo.coffee");
require("../../../spec/javascript/bar.coffee");

But that means manually requiring hundreds of test files. Probably not doing this right :)

[paulsturgess]

I know this is issue is closed but I just setup jest along with an app/javascript/__tests__ directory and I found the specs failed on Travis. This appeared to be because it looks for any file ending in test.js and it found some I hadn't written. I was able to resolve this by updating my package.json to include a roots path to specify where to look for tests:

  "scripts": {
    "test": "NODE_PATH='./node_modules:../app/javascript' jest"
  },
  "jest": {
     "roots": [
       "app/javascript"
     ]
   },