TypeError: Class constructor cannot be invoked without 'new'

[icfantv]

• Issue

  • I'm using a lodash-decorator @BindAll() at the class level for my React components. This code works fine in production, but breaks during our Jest testing with the above error.

  • I've filed BindAll: Class constructor cannot be invoked without 'new' steelsojka/lodash-decorators#47, but am pretty sure at this point, it's not the lodash-decorator library.

• Expected behavior

  • Tests should execute normally, without error.

• Output from your debug log

  • This file is not being generated

• Link to a minimal repo that reproduces this issue

  • https://github.com/icfantv/lodash-decorator-issue
  • Run yarn install and yarn test and you'll see the failure. Switching to a method-level @Bind() operator, works fine.

• Optional (but highly recommended) - Configure Travis (or your favorite system) with the minimal repo

  • Not strictly necessary. Can be easily run/seen from command line or from within IDE.

[icfantv]

I can reproduce this issue with https://github.com/kentcdodds/react-testing-library as well. What I don't understand, however, is why it looks like ts-jest is never getting invoked. I set a breakpoint in the ts-jest library code and it's never getting hit so I may be doing something wrong there.

[icfantv]

Another update: I tried with core-decorators instead of lodash-decorators and the tests pass just fine.

[ahnpnl]

Hi,

I used to debug a bit with ts-jest and I found out Jest cached all the executed codes after the first run. Therefore the breakpoint won't hit anymore after the first run.

Nevertheless, have you tried to put console log or breakpoint at transpiler.ts ? There is a method transpileTypeScript in it which always triggers (ofc if you don't use Babel). I haven't tried to debug your codes yet but I think I should share this about debugging ts-jest.

Side information: have you tried with ts-jest v23 ? Do you encounter the same issue ?

[icfantv]

Apologies for not following up on this. The issue was with the way lodash-decorators was operating on class constructors. It was doing it in a way that the compiler couldn't handle. I’d filed an issue with the LD dev and he has fixed. I would recommend against using core decorators because of the way it implements the bind operation in that the author chose to do this via a getter meaning the function that applies the bind is executed every time and it doesn’t need to be.

[anuraghazra]

Hi, i'm also facing a similar issue with this, I know the reason behind it (https://stackoverflow.com/questions/51860043/javascript-es6-typeerror-class-constructor-client-cannot-be-invoked-without-ne) but i could not make it work. any ideas?

Currently i'm trying to test a slider component which mocks the MouseEvent like so

beforeAll(() => {
    const oldMouseEvent = MouseEvent;
    // @ts-ignore
    global.MouseEvent = class FakeMouseEvent extends MouseEvent {
      _init: { pageX: number; pageY: number };
      constructor(name: any, init: any) {
        super(name, init);
        this._init = init;
      }
      get pageX() {
        return this._init.pageX;
      }
      get pageY() {
        return this._init.pageY;
      }
    };
    // @ts-ignore
    global.MouseEvent.oldMouseEvent = oldMouseEvent;
  });
  afterAll(() => {
    // @ts-ignore
    global.MouseEvent = global.MouseEvent.oldMouseEvent;
  });

[icfantv]

@anuraghazra I would encourage you to post your issue on SO along with what you've already tried w/r/t debugging as your request does not initially appear to be related to the original issue (which turned out to not be the result of the ts-jest library).