Storyshots: Fix mdx transform

[rileylnapier]

after we transform from mdx to js... we need to name the file extension js so our other jest transforms transform the js correctly.

Issue:

What I did

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[shilman]

Makes sense, thank you for the fix! 🙏 Please see my comment inline.

[shilman]

@rileylnapier Hmm this seems to break CI. @Hypnosphi can you take a quick look?

[Hypnosphi]

@rileylnapier can you please describe the original issue you're solving here? Right now the JS transforms are applied to mdx, it's done in getNextTransformer

[rileylnapier]

@rileylnapier can you please describe the original issue you're solving here? Right now the JS transforms are applied to mdx, it's done in getNextTransformer

The issue that I had is that after my mdx gets transformed into JS. The JS that results has things like import React from "react" and then i get an error because I still need to transpile this JS... but my jest config wont' transpile it because it still has a .mdx extention.

With this being said... I think my team and I are probably just going to to CSF as the MDX stuff is too tricky with the whitespace errors and no typescript typechecking. Def love the idea, but I don't think its what my team will be into.

i'm also using ts-jest btw, not babel-jest if that would make a differnce

[Hypnosphi]

@rileylnapier can you please share your jest config? Or, even better, create a reproduction repo? We have JS transforms in our config, and they're definitely applied

[rileylnapier]

this was my config:

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  roots: ["<rootDir>"],
  transform: {
    "\\.mdx$": "@storybook/addon-docs/jest-transform-mdx",
    "\\.(ts|tsx|js|jsx)$": "ts-jest",
  },
  transformIgnorePatterns: ["node_modules"],
  moduleFileExtensions: ["js", "json", "jsx", "ts", "tsx", "mdx"],
  moduleNameMapper: {
    "^[@./a-zA-Z0-9$_-]+\\.(png|jpg|gif)$": "RelativeImageStub",
  },
  setupFilesAfterEnv: ["<rootDir>/../../setup/setupTest.js"],
  setupFiles: ["<rootDir>/../../setup/jest.init.js"],
  globals: {
    "ts-jest": {
      tsConfig: "<rootDir>/.storybook/tsconfig.json",
    },
  },
};

[rileylnapier]

and this is the error I get. note its referencing a .mdx file that has js in it now.

[Hypnosphi]

@rileylnapier can you please also copy a few lines above your screenshots? Looks like they're saying something about ts-jest

[rileylnapier]

ts-jest[jest-transformer] (WARN) Got a unknown file type to compile (file: /Users/rileynapier/trycourier/frontend/packages/studio
/components/atoms/form/checkbox/index.stories.mdx). To fix this, in your Jest config change the transform key which value is ts-jest so that it does not match this kind of files anymore.

I guess this is why i needed the file to be .js so tsjest would transpile it after?

[Hypnosphi]

OK I got it, your solution should work better indeed. Actually, we can replace getNextTransformer with just new ScriptTransformer(config) then, as we don't need to patch transform array anymore

[Hypnosphi]

Suggested change

	return getNextTransformer(filename, config).transformSource(jsFileName, result, instrument);
	return new ScriptTransformer(config).transformSource(jsFileName, result, instrument);

[rileylnapier]

we would want to delete getNextTransformer then right?

[Hypnosphi]

yep

[rileylnapier]

so to be clear. this was not an issue when using babel-jest right? because babel doesn't have file extension restrictions right? so you tell babel to transpile a file with .mdx and say its js, babel is cool with that.

however, something like ts-jest does care about the file extension and giving it a .mdx file it gets mad.

i did have to enable allowJs inside the tsConfig for this too btw