Using Testcafe with TS Decorators?

Question

I am trying to combine decorators with testcafe hooks, however this doesn't work: I am getting:

Declaration expected Error, Is this can be achieving this? also with alternate solutions?

This:

fixture `Fixture 1`    
    .before(async() => {
        console.group('Fixture 1 before all tests of fixture 1 have started');
        console.log('Inside Fixture 1 before');
        console.groupEnd();
    })

Into:

fixture `Fixture 1` 
   @autoGroups
    .before(async() => {
        console.log('Inside Fixture 1 before');
    })

Answer 1

As far as I understand, decorators can be applied only to a class declaration, method, accessor, property, or parameter (see https://www.typescriptlang.org/docs/handbook/decorators.html#decorators). You're trying to apply a decorator to the before function call, which is incorrect.

Please try the following approach:

import { Selector } from 'testcafe';

function methodDecorator (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log("********************************");
}

class ClassWithDecorators {
    @methodDecorator
    before () {
        console.log('before');
    }
}

async function onBefore () {
    console.log('Inside Fixture 1 before');
}

fixture('Fixture 1')
    .page('http://example.com')
    .before(async () => new ClassWithDecorators().before());

test('test', async t => {
    await t.click('h1');
});

Answer 2

You can create a new issue regarding the mistake in the TestCafe documentation here.