search

fast-reflexes / better-react-mathjax

MIT License
124 stars 16 forks source link

Jest error: The requested module 'better-react-mathjax' does not provide an export named 'MathJax' #62

Closed nikolas closed 3 months ago

nikolas commented 4 months ago

Running tests with jest 29.7.0, better-react-mathjax is throwing this error on my react component tests:

 FAIL  media/js/src/Editor.test.js
  ● Test suite failed to run

    SyntaxError: The requested module 'better-react-mathjax' does not provide an export named 'MathJax'

      at Runtime.linkAndEvaluateModule (node_modules/jest-runtime/build/index.js:708:5)

However, everything is working correctly in my production build - it is just the tests that throw this error.

fast-reflexes commented 4 months ago

Hi there! Such tests are present in the repo with Jest 29.7.0 and they work ... hmm can you post some more info about the test and what the Editor.js component looks like?

nikolas commented 4 months ago

Hmmm, that's strange. Here is my code as an example of one of the components it's failing on. I have just disabled these tests for now.

fast-reflexes commented 4 months ago

Can you give me instructions on how to reproduce the error? Simply download project and run test script? Also, is it easy to run the project locally and see this RangeEditor in action? Otherwise could you just provide some brief instructions on how to be able to see it in action :)

fast-reflexes commented 3 months ago

@nikolas I was VERY kind and looked in to this a bit and can provide two solutions.

better-react-mathjax provides both CJS and ESM exports.

First of all the use of ESM modules in Jest is marked as experimental so spending too much time on trouble-shooting this seems inconvenient. What happens is that in the test context, Jest grabs the CJS module of better-react-mathjax and then treats is like an ESM module. I don't know EXACTLY what happens but it is somehow related to that. It then transforms this file using babel-jest which you transform ALL code with according to your Jest config and the output is not a file that have the named exports you're looking for. I will not go into detail exactly what happens as it would be too time-consuming but since I AM able to use better-react-mathjax in a regular Node environment as a CJS module, I'm gonna assume that the problem is not only in this library but also in the combination of how Jest and babel-jest processes the input. I was trying to get ahold of the transformed code that Jest actually uses when running the test but I was unable to do so.

I also notice that you have MANY files in your code base which contains jsx but which still are named js which I think is incorrect.

So, the fixes I can provide for this problem:

  1. Turn off the support for ESM and let babel-jest preprocess all ESM modules into CJS before running the tests. SO starting form the current state of this repo, simply clear the testPathIgnorePatterns in jest-config.cjs and then remove the NODE_OPTIONS=--experimental-vm-modules part of the test script and all tests pass fine.

  2. An other fix is to ALWAYS import stuff literally from better-react-mathjax/esm, then all tests pass too.

I would suggest the first fix since the support for ESM modules is still experimental.

I will close this if you don't provide any additional questions :)

nikolas commented 3 months ago

Thanks for looking into this - I just opened this ticket on the offchance that there was an issue in this better-react-mathjax package, but it turns out it's my babel/jest setup.