search

wavded / babel-tape-runner

Babel + Tape runner for your ESNext code
134 stars 16 forks source link

Question: How to test in browser? #20

Closed JesterXL closed 8 years ago

JesterXL commented 8 years ago

I think I may be missing something obvious. Using babel-tape-runner on my code seems to work great. However, as soon as I include browser related classes, like window or document, it breaks. I guess this is because it's running in Node. I tried tape-run and testling and neither work.

Is babel-tape-runner only for Node server code, or is there some webpack/tape thing I'm missing to make it work with browser code? I can use Karma, just wanted to make sure that was the expected way.

wavded commented 8 years ago

babel-tape-runner is only built to be run using Node. You can mock DOM API's or use universal modules for testing. However, if you need the browser, this library can't help with that.

larrybotha commented 8 years ago

Use browserify and babelify to transform your files, and pipe to something that has a DOM.

i.e. Install devtool, browserify, babelify, and babel presets.

package.json:

  "browserify": {
    "transform": [["babelify", { "presets": ["es2015", "stage-0", "react"] }]]
  }
$ browserify path/to/test.js | devtool
JesterXL commented 8 years ago

Got it, thanks a lot guys! @larrybotha @wavded Makes sense.

brigand commented 8 years ago

@larrybotha I read the readme, and it looks like devtool runs your code in node.js, and doesn't run the code in the browser.

Edit: nevermind, it seems to run it with both node and browser apis available.

larrybotha commented 8 years ago

@brigand I was running some browserified tests earlier as described above - they were passing when running through devtool, but failing with window undefined when running through babel-tape-runner.

Devtool uses Electron, which uses Webkit.

If you open devtool up, you'll see that not only are both window and document defined (via console), but so is process 💃

EDIT: but yes, it's not a DOMified browser, but the browser globals are at least there EDIT: in fact, it does have a DOM - check document.body. I'm done fo' real this time!