Jest testing with Lingui and TypeScript

[danielkcz]

I've finally got some time allocated to a catch up on unit tests with our Lingui powered TypeScript app and it turned out to be quite a challenge. I do realize it's not something everyone has experience with, but perhaps some ideas will come out of this.

The issue is that Jest cannot use Webpack configuration to transpile the code. It has it's own ts-jest transform and adding Babel to the mix is supported only for JS files. Currently, I am trying to use "old" transformation Babel plugins as I don't feel that macros are ready for a production yet and I don't like current syntax particularly.

I've prepared a repo with minimal showcase and attempt at a solution based on composing ts-jest & babel-jest together, but for some reason, I am unable to make it work. The TypeScript code gets transpiled, but Lingui plugins won't do its part.

https://github.com/FredyC/ts-jest-lingui

There is also a log file included with an output from both transformations. I am not sure why is it happening.

Also I would like to point out that I don't want to use Babel with TypeScript transform as there are some caveats and I am not willing to accept those.

cc @huan086 @quentez @ghostd
(in case you have some insight here since you made typescript extractor)

[tricoder42]

How does ts-jest work? Does it support Babel plugins or it transform typescript and then let Babel plugins do their part?

[danielkcz]

Yes, it's fairly similar. I've decided to make my own transform like that because of the transparency of the config otherwise it's rather entangled code in ts-jest.

ts-jest using babel
my transform using babel

There seems to be something odd happening on Lingui plugin side as it won't recognize that i18n.t call and leaves it as it is.

[danielkcz]

@tricoder42 Do you have possibly any ideas? It's starting to be fairly limiting as I am getting warning in tests which ends up with no text to be rendered :/

@lingui/babel-preset-react is probably missing in babel config, but you are using < Trans > component in a way which requires it.

Do you possibly see any reason why the following output coming from Typescript won't be correctly handled by Lingui Babel plugins in the next step? In both tests it just stays the exactly same.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const react_testing_library_1 = require("react-testing-library");
const i18n_1 = require("./i18n");
const react_2 = require("@lingui/react");
test('using i18n.t', () => {
    const message = i18n_1.i18n.t `Test message`;
    expect(message).toBe("Translated message");
});
test('using Trans', () => {
    const { container } = react_testing_library_1.render(<react_2.Trans>Test message</react_2.Trans>);
    expect(container.textContent).toBe("Translated message");
});

[danielkcz]

Ok, I think I got some lead. The plugin needs ESM syntax, right? Well, that turned out to be an issue as ts-jest is forcing compilation to CommonJS because Jest doesn't understand anything else. I created an issue if there some way around that, but after some digging I don't think it would be possible.

So I am wondering, since Macros are still a long way to go, how difficult or if even possible would be to modify plugin to work with CommonJS as well? I can understand that you don't have a capacity for that, so I might give it a try, but I just would like to hear from you some assessment on complexity of such change.

[evdama]

is there a resolution to this issue now?

[danielkcz]

Get rid of ts-jest :D I just switched to Babel Typescript and don't worry about it anymore.

[kopax-polyconseil]

How do you get ride of ts-jest ? That's the only way for I to get the test running.