tqwewe / prettier-plugin-tailwind

Sort tailwind classes in HTML with Prettier.
https://www.npmjs.com/package/prettier-plugin-tailwind
MIT License
428 stars 25 forks source link

Jest inline snapshot testing fails when prettier-plugin-tailwind is installed #25

Open TimonVS opened 3 years ago

TimonVS commented 3 years ago

Describe the bug

First of all, thanks for this wonderful plugin!

I'm running into some problems when using this plugin with Jest. Inline snapshot testing (toMatchInlineSnapshot) in Jest uses Prettier (https://jestjs.io/docs/en/snapshot-testing#inline-snapshots), tests using inline snapshot testing start to fail as soon as you install prettier-plugin-tailwind, tests that use non-inline snapshot testing or no snapshot testing at all work just fine.

 FAIL  src/landing-page/landing-page-paths.test.ts
  ● Test suite failed to run

    TypeError: Cannot read property 'twJsxClassAttributes' of undefined

      at Object.parse (node_modules/prettier-plugin-tailwind/lib/parsers/typescript.js:19:40)
      at Object.parse (node_modules/prettier/index.js:13625:19)
      at coreFormat (node_modules/prettier/index.js:14899:14)
      at format (node_modules/prettier/index.js:15131:14)
      at node_modules/prettier/index.js:57542:12
      at Object.format (node_modules/prettier/index.js:57562:12)

I did a bit of debugging and it boils down to the options argument in the parse function being undefined when ran by Prettier in Jest: https://github.com/Acidic9/prettier-plugin-tailwind/blob/master/src/parsers/typescript.ts#L12.

I'm not yet sure if this is a bug with plugin-prettier-tailwind, Jest or Prettier. I'm hoping someone with more knowledge about the internal workings of these tools might shed some light on that :)

To Reproduce

https://codesandbox.io/s/nameless-river-f9fuy?file=/index.test.js

Expected behavior

Inline snapshots should be formatted with plugin-prettier-tailwind.

Versions:

peterp commented 3 years ago

I'm having the same issue.

thebuilder commented 3 years ago

Thinking it would make sense to simply have it skip running the prettier task if the options are undefined. It's just used to by Jest to ensure consistent formatting of the snapshot code, so it doesn't make sense to format the tailwind code anyway.

kik4 commented 3 years ago

I'm having the same problem.

cassus commented 2 years ago

41 and upgrading to the latest version fixed it for me. Thanks @kik4 !