Handling global imports with Jest, React, and Webpack

Question

I recently started working on an already mature project where I am integrating the Jest testing framework. The project uses React with Webpack. In the webpack config, the team is using webpack.ProvidePlugin to provide React, lodash, and classnames (not what I would have done, but whatever).

The problem I'm running into, is that most of the React classes at the top of the file contain something like React.Component, which works fine because of the webpack base config. However, when I run the corresponding test file, I just get React is not defined unless I explicitly require React.

There is a webpack.test.config file that requires the base webpack config, but nevertheless I can't seem to get it so that I can run the tests without explicitly including import React from 'react' at the top of every file. I don't want to have to go manually import React in every file, anyone have any suggestions of what to do?

I ended up just removing the global imports and importing React in every file after discussing with the team. Neither of these solutions worked for me. — Max Millington
– Max Millington, Commented Jun 30, 2017 at 22:02
Yeah that's been my strategy as well. I prefer not to do globals. Sorry I couldn't be of more help! — spoonscen
– spoonscen, Commented Jul 2, 2017 at 0:55

user8390261 · Accepted Answer · 2017-07-31 16:16:25Z

2

I think it is an anti-pattern to use globals in this case. I would just remove the globals and include react in every file

answered Jul 31, 2017 at 16:16

user8390261

Sign up to request clarification or add additional context in comments.

Comments

Andrew G. · Accepted Answer · 2017-06-28 23:29:55Z

0

You could try using jest's resolver and when you get to the react import return the path to react. OR you could use jest's setupFile and import React from 'react'; in there

answered Jun 28, 2017 at 23:29

Andrew G.

4183 silver badges11 bronze badges

Collectives™ on Stack Overflow

Handling global imports with Jest, React, and Webpack

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related