Q: how to go in debug mode

[AlexandreDecollas]

Hi,

I tried several things, but nothing worked, so I come directly ask the question :

I want to be able to debug my jest tests, so put a break point in my IDE, and be able to stop on it, like with ts-jest. but with swc, it fails. I supposed that the source-maps were missing, but event with the option

{
  "sourceMaps": true
}

in my .swcrc file it fails. Does someone has the same issue or have a solution please?

[Brooooooklyn]

See https://github.com/Brooooooklyn/swc-node/tree/master/packages/jest#configuration

// jest.config.js
module.exports = {
  transform: {
    '^.+\\.(t|j)sx?$': [
      '@swc-node/jest',

      // configuration
      {
        sourcemap: true
      },
    ],
  },
}

[AlexandreDecollas]

Thank you for your answer :) I tried this option, but it does not work. My jest.config.js is :

module.exports = {
  transform: {
    '^.+\\.(t|j)sx?$': [
      '@swc-node/jest',
      {
        experimentalDecorators: true,
        sourcemap: true,
      },
    ],
  },
  moduleFileExtensions: ['js', 'json', 'ts'],
  rootDir: './src',
  testRegex: '.spec.(t|j)s$',
  coverageDirectory: '../coverage',
  testEnvironment: 'node',
};

Should I run jest with some specific option to enable debugging? Else, where can I check the sourcemaps are effectively generated?

[AlexandreDecollas]

I downloaded the swc-node project, and succedded to stop at a break point only in inline-snapshot.test.ts, I cannot debug other tests. And I do not understand what makes the conf works for this one, and not for the other ones

[EDIT] : In my intellij, I can stop on breakpoints only when I de-select the jest.config.js conf file, if it can help

[Brooooooklyn]

Seem like sourcemap is correctly been set, but there are bugs in sourcemap generated.

[AlexandreDecollas]

yep, and the breakpoint that works only works because there is no typescript in the test file... These bugs are from the original project, so Do you think I should ask them?

[Brooooooklyn]

@kdy1

[kdy1]

Can you try https://swc.rs/docs/configuring-swc#inlinesourcescontent?

[Brooooooklyn]

@AlexandreDecollas you can try swc-jest with https://swc.rs/docs/configuring-swc#inlinesourcescontent

This project is aim to provide tsconfig compatible ability to swc, and https://swc.rs/docs/configuring-swc#inlinesourcescontent is not covered now.

[AlexandreDecollas]

thank you, I tried, but nothing seem to work. Maybe I should wait for a fix, or maybe do you know a previous version that worked with sourcemaps?

[AlexandreDecollas]

Hi again!

I investigated a bit, and it seems that actually the sourcemaps are well generated. I modified your transormation process and put some logs to see what happens, and what I saw :

• First, we need to modify the unit test before each run, because else, it's not reusing the transform option.

• Secondly, I can see that once the transformed is done with swc-core, the option sourceMap actually work, mean that when true, the sourcemaps are generated, not when false.

At the end, I have not so much ideas because, whereas the sourcemaps are generated, the breakpoints still doesn't work.

@kdy1 I tried your option and I also tried swc-jest, it fails the same.

Maybe a last clue is that when I try to debug a dumb test like this :

describe('App', () => {
  it("should be ok!", () => {
    console.log(new Date())
    expect(true).toBeTruthy();
  });
});

... and I put a console.log just before sending the transform result, I have this result, containing sourceMaps. I'm wondering this sourcemaps are valid or not :

{
  code: "describe('App', function() {\n" +
    '    it("should be ok!", function() {\n' +
    '        console.log(new Date());\n' +
    '        expect(true).toBeTruthy();\n' +
    '    });\n' +
    '});\n',
  map: '{"version":3,"sources":["<anon>"],"names":["describe","it","console","log","Date","expect","toBeTruthy"],"mappings":"AAAA,QAAQ,CAAC,CAAK,MAAE,QAChB,GADsB,CAAC;IACrB,EAAE,CAAC,CAAe,gBAAE,QACtB,GAD4B,CAAC;QACzB,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI;QACpB,MAAM,CAAC,IAAI,EAAE,UAAU;IACzB,CAAC;AACH,CAAC"}'
}

Seeing that, do you see something weird? (the mappings seem very unusual to me...)

[EDIT]: juste for info, the sourcemaps option was true previously. When it's 'inline', it gives that :

{
  code: "describe('App', function() {\n" +
    '    it("should be ok!e", function() {\n' +
    '        console.log(new Date());\n' +
    '        expect(true).toBeTruthy();\n' +
    '    });\n' +
    '});\n' +
    '\n' +
    '//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxhbm9uPiJdLCJuYW1lcyI6WyJkZXNjcmliZSIsIml0IiwiY29uc29sZSIsImxvZyIsIkRhdGUiLCJleHBlY3QiLCJ0b0JlVHJ1dGh5Il0sIm1hcHBpbmdzIjoiQUFBQSxRQUFRLENBQUMsQ0FBSyxNQUFFLFFBQ2hCLEdBRHNCLENBQUM7SUFDckIsRUFBRSxDQUFDLENBQWdCLGlCQUFFLFFBQ3ZCLEdBRDZCLENBQUM7UUFDMUIsT0FBTyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsSUFBSTtRQUNwQixNQUFNLENBQUMsSUFBSSxFQUFFLFVBQVU7SUFDekIsQ0FBQztBQUNILENBQUMifQ=='
}

[EDIT2]: More info, I juste tried the same thing with ts-jest, and it generates something very similar to the inline sourcemaps :

  "use strict";
  describe('App', function () {
    it('should be ok!', function () {
      console.log(new Date());
      expect(true).toBeTruthy();
    });
  });
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJmaWxlIjoiL1VzZXJzL2FsZXhhbmRyZS93b3Jrc3BhY2UvdmVpbGxlL3RzLWplc3Qvc3JjL3Rlc3QudHMiLCJtYXBwaW5ncyI6IjtBQUFBLFFBQVEsQ0FBQyxLQUFLLEVBQUU7SUFDZCxFQUFFLENBQUMsZUFBZSxFQUFFO1FBQ2xCLE9BQU8sQ0FBQyxHQUFHLENBQUMsSUFBSSxJQUFJLEVBQUUsQ0FBQyxDQUFBO1FBQ3ZCLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQyxVQUFVLEVBQUUsQ0FBQTtJQUMzQixDQUFDLENBQUMsQ0FBQTtBQUNKLENBQUMsQ0FBQyxDQUFBIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi9Vc2Vycy9hbGV4YW5kcmUvd29ya3NwYWNlL3ZlaWxsZS90cy1qZXN0L3NyYy90ZXN0LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImRlc2NyaWJlKCdBcHAnLCAoKSA9PiB7XG4gIGl0KCdzaG91bGQgYmUgb2shJywgKCkgPT4ge1xuICAgIGNvbnNvbGUubG9nKG5ldyBEYXRlKCkpXG4gICAgZXhwZWN0KHRydWUpLnRvQmVUcnV0aHkoKVxuICB9KVxufSlcbiJdLCJ2ZXJzaW9uIjozfQ==

If you have an idea, don't hesitate, I do not know what to search for now..

[maschwenk]

@AlexandreDecollas did you ever figure this out? Having the same issue

[AlexandreDecollas]

@maschwenk nope, sadly not at this day. If finally you have a solution, feel free to tell me :)

[kdy1]

Can you try inlined sourcemap again with newer version of @swc/core?

[maschwenk]

@kdy1 just to be clear that'd be:

{
  "sourceMaps": 'inline',
  "inlineSourcesContent": true
}

?

(or the equivalent that swc-node configuration?)

Also when you say newer do you mean swc-node or @swc/core? It would be easier for me to test swc-node because it has the pre-baked configuration

[Brooooooklyn]

@swc-node/* has swc configuration for the orignal swc config: https://github.com/Brooooooklyn/swc-node/blob/master/packages/core/index.ts#L27

BTW, I'll make inlined sourcemap enabled in @swc-node/jest by default in the next release.

[Brooooooklyn]

@AlexandreDecollas hey inlineSourcesContent is enabled by default in the latest version, could you checkout if this issue is fixed?

[AlexandreDecollas]

@Brooooooklyn hey!

yes, I tested by default with the v1.4.1, and by default breakpoints are not working. but by adding such a conf :

module.exports = {
  transform: {
    '^.+\\.(t|j)sx?$': [
      '@swc-node/jest',
      {
        experimentalDecorators: true,
        swc: {
          sourceMaps: 'inline',
        },
      },
    ],
  },
  moduleFileExtensions: ['js', 'json', 'ts'],
  rootDir: './src',
  testRegex: '.spec.(t|j)s$',
  coverageDirectory: '../coverage',
  testEnvironment: 'node',
};

This way, I have the breakpoints working well. So thank you very much for your help! :)

I think btw it could be interesting to add this option by default too (and not only inlineSourcesContent), because it's quite often that we have a need for debugging in the UTs

[Brooooooklyn]

I think btw it could be interesting to add this option by default too (and not only inlineSourcesContent), because it's quite often that we have a need for debugging in the UTs

Sure, I'll add it in the next release

[AlexandreDecollas]

Thanks, I'm sure that this project will really help the daily work for a lot of people 👍