how can I use esbuild --inject flag with esbuild-jest

[daniloab]

Im having problem when running a test with a react js component inside of it. Since Im at on version 17 I do not import the react anymore.

Then, when running test complaint about this:

React is not defined

By now, I want to try fix it using the --inject flag to inject a shim.js file containing the react js import as explained here https://github.com/evanw/esbuild/blob/03a33e6e007467d99989ecf82fad61bd928a71aa/CHANGELOG.md#0717

Beyond this there is another way to fix this problem? this issue is related to this

• https://github.com/aelbore/esbuild-jest/issues/61

I share here the problem I'm facing it https://twitter.com/daniloab_/status/1497258702662823936

[daniloab]

I tried to do this but my tests keep breaking https://github.com/aelbore/esbuild-jest/issues/61#issuecomment-1061011148

[ignaciomartinelias]

To solve this you could add React as a global variable in your setup file that runs after the testing environment is set. First you will need to go to your jest.config.js file and see if you have any configuration for this setup (you should look for the property setupFilesAfterEnv and see if its set to any path). The file in this path will run before every test, so its a good place to have global mocks or imports ;). Here you can import React and attach it to the global object.

So...

config/jest.js

import * as React from 'react'

global.React = React

...  // the rest of your configuration 

jest.config.js

module.exports = {
    ...yourConfig,
    setupFilesAfterEnv: ["config/jest.js"]
}

[breitembach]

My MR resolve this problem MR