prettier-plugin-tailwind icon indicating copy to clipboard operation
prettier-plugin-tailwind copied to clipboard

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

Open TimonVS opened this issue 4 years ago • 4 comments

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:

  • prettier-plugin-tailwind version: 2.2.9
  • Operating system: macOS
  • NPM/Yarn version: 6.14.5

TimonVS avatar Mar 03 '21 08:03 TimonVS

I'm having the same issue.

peterp avatar Mar 16 '21 08:03 peterp

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.

thebuilder avatar Apr 26 '21 13:04 thebuilder

I'm having the same problem.

kik4 avatar Oct 25 '21 12:10 kik4

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

cassus avatar May 21 '22 07:05 cassus