0

We are using TestCafe for our E2E testing purposes and wanted to implement a formatter so all contributors push the same style code up. I have Prettier up and running and have some config rules in place, but we are seeing some wonkiness that I think is because of how TestCafe likes to be written.

I understand formatters are opinionated and each line could react differently, but the gist is something like: Does Prettier have a way to add a regex or something to tell it to ignore certain syntax?

For example, in TestCafe, when writing a test, you can add .meta, .before, .after before the actual test title and function. Doing so and then formatting, Prettier might connect .meta.before.after all together. Same thing happens with the fixture and .page before defining tests.

How we'd want it (based on configs):

fixture`dev_tests`
    .page`www.sampleurl.com`

test
    .meta({
        createdOn: '08/25/21',
        createdBy: 'Bob Barley',
        updatedOn: '08/26/21',
        updatedBy: 'Bob Barley',
    })
    .meta({ scope: 'functional', priority: 'high', showstopper: 'yes' })
    ('Sample_test_title', async (t) => {
        await t.click()
    })

How Prettier formats it:

fixture`dev_tests`.page`www.sampleurl.com`

test
    .meta({
        createdOn: '08/25/21',
        createdBy: 'Bob Barley',
        updatedOn: '08/26/21',
        updatedBy: 'Bob Barley',
    })
    .meta({ scope: 'functional', priority: 'high', showstopper: 'yes' })(
    'Sample_test_title',
    async (t) => {
        await t.click()
    }
)

We'd like to know if there's something we could build out in a config file or something to say "If the next character is a . after the word 'fixture', don't format until the word 'test'." And the same for "If the next character is a ( after the character ), don't format." So on and so forth.

Current configs for Prettier:

{
    "arrowParens": "always",
    "bracketSpacing": true,
    "embeddedLanguageFormatting": "auto",
    "endOfLine": "lf",
    "insertPragma": false,
    "parser": "babel",
    "printWidth": 80,
    "proseWrap": "always",
    "quoteProps": "as-needed",
    "semi": false, 
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "es5",
    "useTabs": true
}

We've already implemented a .prettierignore file and have tried //prettier-ignore within the file, but that just ignores the entire test node. The comment doesn't seem to work if you plug it in where you want Prettier to skip.

Justin Braden
  • 103
  • 9
  • @t.niese //prettier-ignore will only ignore the node it's placed over. We want to format the test syntax in case someone uses " instead of ' or used spaces instead of tabs. Placing //prettier-ignore inside a node doesn't seem to trigger it. So we can't put //prettier-ignore on the line we don't want formatted, just a node we wouldn't want formatted (a test). – Justin Braden Aug 26 '21 at 14:31
  • Ah ok, sorry now I get it. – t.niese Aug 26 '21 at 14:33
  • I think the only way to solve that problem is to write a [plugin](https://prettier.io/docs/en/plugins.html) – t.niese Aug 26 '21 at 14:37

0 Answers0