Problem with typescript

[tomitrescak]

Hi, I'm trying to run my tests in Typescript and I'm running into issue when wallaby is returning:

Postprocessor run failure: Failed to parse src/client/modules/comments/components/comment_list.tsx.compiled.js, SyntaxError: Unexpected token (8:23)

There is not much more info.

This is my config:

module.exports = function(wallaby) {
  // There is a weird error with the mui and mantra.
  // See: https://goo.gl/cLH8ib
  // Using require here seems to be the error.
  // Renaming it into `load` just fixed the issue.
  var load = require;

  return {
    files: [
      'src/client/modules/**/components/*.tsx',
      'src/client/modules/**/actions/*.ts',
      'src/client/modules/**/containers/*.ts', 'client/modules/**/libs/*.ts'
    ],
    tests: [ 'src/client/modules/core/actions/tests/*.ts' ],
    compilers: {
      '**/*.js*': wallaby.compilers.babel({
        babel: load('babel-core'),
        presets: [ 'es2015', 'stage-2', 'react' ]
      }),
      '**/*.ts*': wallaby.compilers.typeScript()
    },
    env: {
      type: 'node'
    },
    testFramework: 'mocha',
    setup: function() {
      global.React = require('react');
    }
  };
};

Changing compiler options to:

'**/*.ts*': wallaby.compilers.typeScript({ module: "es6"})

Leads to following error:

SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:413:25)
    at Object.Module._extensions..js (module.js:452:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Array.forEach (native)

I am trying to setup a typescript project for the Mantra framework that is slowly becoming standard for Mantra apps.

You can find the repo here:

https://github.com/mantrajs/kickstart-mantrajs-webpack-typescript.git

Would you be able to help? Currently I am trying to do this with a single file. But it seems to be failing on "tsx" files.

[ArtemGovorov]

When TSX files are compiled by TypeScript, the default option is to preserve JSX fragments inside them. Node doesn't understand JSX syntax, so you need to use jsx: 'react' option for your TypeScript compiler. Your example repo is also for some reason using module: 'amd', you need to use module: 'commonjs' as you're running the tests in node environment.

Changing your TypeScript compiler setting to

'**/*.ts*': wallaby.compilers.typeScript({module: "commonjs", jsx: "react"})

should work for you.

[tomitrescak]

Artem, as usual ... amazing support! Thanks! That solved it.

I have one more question though. I had to manually insert import { Component } from "react" into all mantra stateless component source code, as I was getting "React not defined" (actually the error was cannot call createElement of undefined).

In our settings above we did put:

setup: function() {
      global.React = require('react');
    }

Is there any particular reason why React is not available to components? With the manually inserted line everything works, just looks a bit unnecesary.

Thanks!

[ArtemGovorov]

@tomitrescak I'm trying to reproduce the issue you have mentioned and commenting out the

import { Component } from "react";

line in newpost.tsx, but with or without it, tests are passing.

[tomitrescak]

Artem, newpost is the only one where it work, because it references the React in the code;) try with postlist.tsx please

On Monday, 7 March 2016, Artem Govorov notifications@github.com wrote:

@tomitrescak https://github.com/tomitrescak I'm trying to reproduce the issue you have mentioned and commenting out the

import { Component } from "react";

line in newpost.tsx https://github.com/mantrajs/kickstart-mantrajs-webpack-typescript/blob/master/src/client/modules/core/components/newpost.tsx#L1, but with or without it, tests are passing.

— Reply to this email directly or view it on GitHub https://github.com/wallabyjs/atom-wallaby/issues/31#issuecomment-193013925 .

Tomi Trescak / Researcher tomi.trescak@gmail.com / 0487 261 213

[image: Facebook] https://www.facebook.com/tomi.trescak[image: Twitter] https://twitter.com/tomitrescak[image: Google Plus] https://plus.google.com/112630384447746070397[image: Youtube] https://www.youtube.com/user/tomiiiino[image: Linkedin] https://www.linkedin.com/pub/tomas-trescak/34/b92/801?domainCountryName=&csrfToken=ajax%3A3648494742469937801 [image: skype]

[ArtemGovorov]

@tomitrescak Same for the postlist.tsx, works with or without import { Component } from "react";. The imported Component is not used anywhere inside the postlist.tsx, so I don't see a reason why it wouldn't work.