How to test a custom code block component?

[meganesu]

Hi there! I have a custom CodeBlock component that I'm passing into MDXProvider to use for pre elements. I want to write some automated tests for my CodeBlock component (I'm using Jest and React Testing Library).

But I'm struggling to figure out how to render my CodeBlock component with an example MDX snippet. Could you point me toward an example of what children I need to pass into the CodeBlock component?

Here's what I have so far:

// src/components/code-block/index.test.js
import React from "react"
import { render, screen } from "@testing-library/react"

import CodeBlock from "."

test("Displays the correct title", () => {
  render(
    <CodeBlock>
      {/* How do I pass my test MDX snippet in here? */}
      ```js title="my-test-file.js"
      const test = "hey there!";
      ```
    </CodeBlock>
  )

  const element = screen.getByText("my-test-file.js")

  expect(element).toBeDefined()
})

Running that test gives me the following error (which I'm assuming is because I'm not passing children into my CodeBlock component correctly?):

  ● Displays the correct title

    TypeError: Cannot read properties of undefined (reading 'children')

      15 | const CodeBlock = (props) => {
      16 |   console.log('code block props', props)
    > 17 |   const code = props.children.props.children.trim()
         |                                     ^
      18 |
      19 |   const className = props.children.props.className || ""
      20 |   const language = className.replace(/language-/, "")

      at children (src/components/code-block/index.js:17:37)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:20074:13)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21587:16)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5)
      at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7)
      at recoverFromConcurrentError (node_modules/react-dom/cjs/react-dom.development.js:25850:20)
      at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25750:22)
      at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
      at act (node_modules/react/cjs/react.development.js:2582:11)
      at node_modules/@testing-library/react/dist/act-compat.js:63:25
      at renderRoot (node_modules/@testing-library/react/dist/pure.js:159:26)
      at render (node_modules/@testing-library/react/dist/pure.js:246:10)
      at Object.<anonymous> (src/components/code-block/index.test.js:11:9)

(And here's the CodeBlock component, if it helps:)

import React from "react"

import Highlight, { defaultProps } from "prism-react-renderer"
import theme from "prism-react-renderer/themes/nightOwl"

import {
  container as containerStyles,
  fileTitle as fileTitleStyles,
  languageTag as languageTagStyles,
  preWrapper as preWrapperStyles,
  pre as preStyles,
  code as codeStyles,
} from "./styles.module.css"

const CodeBlock = (props) => {
  const code = props.children.props.children.trim()

  const className = props.children.props.className || ""
  const language = className.replace(/language-/, "")

  const fileTitle = props.title || ""

  return (
    <div className={containerStyles}>
      {fileTitle != "" && (
        <div className={fileTitleStyles}>
          <span aria-label="file">📄</span> {fileTitle}
        </div>
      )}
      {language && <div className={languageTagStyles}>{language}</div>}
      <div className={preWrapperStyles}>
        <Highlight
          {...defaultProps}
          code={code}
          language={language}
          theme={theme}
        >
          {({ className, tokens, getLineProps, getTokenProps }) => (
            <pre className={`${className} ${preStyles}`}>
              {/* for each line in the code */}
              {tokens.map((line, i) => (
                <code
                  {...getLineProps({ line, key: i })}
                  className={codeStyles}
                >
                  {/* for each token in the line */}
                  {line.map((token, key) => (
                    <span {...getTokenProps({ token, key })} />
                  ))}
                </code>
              ))}
            </pre>
          )}
        </Highlight>
      </div>
    </div>
  )
}

export default CodeBlock

Thanks for your help!

[wooorm]

Hi there Megan! :)

You are trying to use your component with MDX, but your tests don’t contain MDX.

In your test, you are only using JSX, to call your component (<CodeBlock>…</CodeBlock>), and you are choosing to pass it a single child (```js…```), which is just a string of text.

Your component does not accept a string as a child. Your component seems to only accept a single react node as a child, which is an element (props.children.props).

So React crashes: your test includes code that your component doesn’t accept. Your component crashes.

You can either change your test to be like something that MDX would pass.
Here’s roughly what MDX would generate:

<pre>
  <code className="language-js">{'const test = "hey there!";'}</code>
</pre>

And to use your component instead of a pre:

<CodeBlock>
  <code className="language-js">{'const test = "hey there!";'}</code>
</CodeBlock>

But you can also use MDX, so you can write actual MDX, instead of having to mock it:

import * as runtime from 'react/jsx-runtime'
import {renderToStaticMarkup} from 'react-dom/server'
import {evaluate} from '@mdx-js/mdx'

const mdxModule = await evaluate(`
\`\`\`js title="my-test-file.js"
const test = "hey there!";
\`\`\`
`, {...runtime, development: false})
const MdxContent = mdxModule.default

assert.equal(
  renderToStaticMarkup(<MdxContent components={{pre: CodeBlock}} />),
  'the string you expect',
  'should support my fancy component'
)

---

However, you also seem to be wondering about the title="my-test-file.js" part of your code.
That is not normal markdown. Or, normal MDX. You can support it though. See https://mdxjs.com/guides/syntax-highlighting/#syntax-highlighting-with-the-meta-field for more info. Practically you likely want to use remark-mdx-code-meta.

[remcohaszing]

I’m with this answer 💯. I’d just like to add you can render and test the MDX component with testing library too, if this is what you want.

import { evaluate } from '@mdx-js/mdx'
import * as runtime from 'react/jsx-runtime'
import { render, screen } from "@testing-library/react"

import CodeBlock from "."

test("Displays the correct title", () => {
  const mdxModule = await evaluate(`
\`\`\`js title="my-test-file.js"
const test = "hey there!";
\`\`\`
`, { ...runtime, development: false })
  const MdxContent = mdxModule.default

  render(<MdxContent components={{ pre: CodeBlock }} />)

  const element = screen.getByText("my-test-file.js")

  expect(element).toBeDefined()
})

---

Semi-related: Maybe we should create an official MDX jest transformer.

[meganesu]

Thanks for the help! Sounds like the evaluate method is what I was looking for.

Now I'm running into a different error when I try to import evaluate into my test file:

 FAIL  src/components/code-block/index.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/megansullivan/Documents/personal-projects/demo-mdx-code-block-with-tests/node_modules/@mdx-js/mdx/index.js:7
    export {createProcessor} from './lib/core.js'
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      3 |
      4 | import * as runtime from 'react/jsx-runtime'
    > 5 | import { evaluate } from "@mdx-js/mdx"
        | ^
      6 |
      7 | import CodeBlock from "."
      8 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1449:14)
      at Object.<anonymous> (src/components/code-block/index.test.js:5:1)

From what I understand, it has something to do with @mdx-js/mdx being ESM and not CommonJS? But so far I haven't been able to fix it.

Demo repo

Here's a demo repo I set up that shows the error (when you run npm run test).

• CodeBlock test: components/code-block/index.test.js
• CodeBlock implementation: src/components/code-block/index.js
• jest.config.js

(The component itself works fine, which you can see if you run npm run develop and then go to localhost:8000.)

What I've tried so far:

Adding @mdx-js/mdx to the transformIgnorePatterns option in my Jest config:

{
  // ...
  transformIgnorePatterns: [`node_modules/(?!(gatsby|gatsby-script|gatsby-link|@mdx-js/mdx)/)`],
  // ...
}

That made that first error go away, but then I just got another similar one for a different node_module that @mdx-js/mdx imports.

I followed that chain for a while, adding the node_module from each new error to transformIgnorePatterns (see commented out line in jest.config.js), but that ended up showing me a different error message:

 FAIL  src/components/code-block/index.test.js
  ● Test suite failed to run

    Cannot find module 'estree-walker' from 'node_modules/estree-util-build-jsx/lib/index.js'

    Require stack:
      node_modules/estree-util-build-jsx/lib/index.js
      node_modules/estree-util-build-jsx/index.js
      node_modules/@mdx-js/mdx/lib/plugin/recma-jsx-build.js
      node_modules/@mdx-js/mdx/lib/core.js
      node_modules/@mdx-js/mdx/index.js
      src/components/code-block/index.test.js

      3 |
      4 | import * as runtime from 'react/jsx-runtime'
    > 5 | import { evaluate } from "@mdx-js/mdx"
        | ^
      6 |
      7 | import CodeBlock from "."
      8 |

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:425:11)
      at Object.<anonymous> (node_modules/estree-util-build-jsx/lib/index.js:93:1)
      at Object.<anonymous> (node_modules/estree-util-build-jsx/index.js:9:1)
      at Object.<anonymous> (node_modules/@mdx-js/mdx/lib/plugin/recma-jsx-build.js:11:1)
      at Object.<anonymous> (node_modules/@mdx-js/mdx/lib/core.js:37:1)
      at Object.<anonymous> (node_modules/@mdx-js/mdx/index.js:7:1)
      at Object.<anonymous> (src/components/code-block/index.test.js:5:1)

I'd appreciate any tips you might have on how to go about debugging this! I'm a bit out of my depth. Thanks for your help!

[wooorm]

This is due to Jest not supporting actual ESM well.
I also see Gatsby. Gatsby has some similar problems.

Particularly Jest (and CRA) is sad because they are quite strong recommendations in the React world. They do so many things. Which is nice at first. But after a couple years all of that becomes very hard to maintain. Leaving users with these problems.

Some recommendations:

• Remove Jest, replace it with something that does less things, and is better maintained
• Build a vendored CJS version of MDX and use that in tests. See for example https://mdxjs.com/docs/troubleshooting-mdx/#esm (expand the example)

[meganesu]

Using the esbuild command from that doc fixed the issue!

(Documenting in case anyone else stumbles on this in the future:)

1. Run npx esbuild @mdx-js/mdx --bundle --platform=node --outfile=vendor/mdx.js from the command line.
2. Update the evaluate import in the test file to use the version from vendors/mdx.js instead of @mdx-js/mdx:
   import { evaluate } from "../../../vendor/mdx"

Thanks so much for all your help! 👏

[DavidMikeSimon]

I wasn't able to use esbuild to directly compile @mdx-js/mdx, but checking out the repo worked just fine:

git clone https://github.com/mdx-js/mdx.git
cd mdx
git checkout 2.3.0
npm install
npx esbuild --bundle packages/mdx/index.js --platform=node --outfile=mdx.js