Using Rewire with TypeScript

[oargaruna]

I am working on a React-Native project using TypeScript. To write my unit tests I would like to use the babel-plugin-rewire to mock my module imports. However, TypeScript adds a _1 suffix at the end of imports while converting from ES6 to ES5, and this breaks my test code.

Consider the following:

import Test from 'test-file';

this might be converted by TypeScript to:

var test_file_1 = require('test-file');

To mock the Test class using the Rewire plugin I would have to write:

ComponentToTest.__Rewire__('Test', TestMock);

but since the import has been renamed this will break.

Though this is by design, I would love to know if there are any workarounds.

Thanks.

[speedskater]

@oargaruna thanks for reporting this issue. As i am not very familiar with typescript my question might be stupid, but is it possible to transpile typescript to es6 and use babel to transpile to es5 (including babel-plugin-rewire)

Maybe this helps: http://stackoverflow.com/questions/30439869/can-typescript-compile-to-es6-code

[speedskater]

@oargaruna Did you try the intermediate step to compile to es6 ?

[oargaruna]

Not yet. I was on vacation for the last two weeks :). I will try it out this weekend.

[speedskater]

@oargaruna any news on this subject?

[petrgazarov]

Hey @speedskater, a bit late to the conversation. Similar problem here -

is it possible to transpile typescript to es6 and use babel to transpile to es5 (including babel-plugin-rewire)

Yes, and I think this is the way to go here

However, one step further, I'm having an issue with the plugin exports - none of the usual exports seem to be defined, e.g. __Rewire__, __ResetDependency__

TypeError: _get__(...) is not a function

All works well if I just rename a .ts file to .js file, confirming @blakeembrey's suggestion that babel-plugin-rewire does not get applied to .ts files.

From babel-register docs:

All subsequent files required by node with the extensions .es6, .es, .jsx and .js will be transformed by Babel.

Does that sound right to you? Have you had similar problems with extensions other than the above? Seems like it's not possible to configure babel extensions in .babelrc like I would normally do in webpack.

[knee-cola]

I'm having similar problems ... as I learned by tracing the execution via debugger.

I did manage force it work by modifying my test. First here's the original line form the spec file:

__Rewire__(‘someModule’, { moduleMethod: aSpy );`

This was changed into the following:

__Rewire__(‘someModule’, { default: { moduleMethod: aSpy } });

Although test started to work fine after this hack, doing something like this isn't really usable ...

The interesting thing is that all works fine as long as both spec and the tested module are written in vanilla JS (they are not processed via a TS loader). However if I rewrite both files to TypeScript, things stop working.

[filipsuk]

@oargaruna @knee-cola have you guys managed to get it working? I'm trying to use typescript + ts-jest + this plugin. I had problems with source maps and coverage.

[boazhoch]

@filipsuk same here

[rivneglee]

Same here

[yinzara]

Still needs "TSInterfaceDeclaration" added as well

[yinzara]

Actually even that didn't fix it. If you have a typescript file such as the following:

export default interface Foo {
    bar: string
}

This plugin causes an error on any app start and throws an exception.

[yinzara]

@oargaruna @knee-cola have you guys managed to get it working? I'm trying to use typescript + ts-jest + this plugin. I had problems with source maps and coverage.

I'm not sure you can use ts-jest with this plugin as you're basically using two different transformations. You should use babel-jest instead with the @babel/preset-typescript preset instead.