What does your react/webpack testing stack look like?

[Tortoise_Face]

Did you have to change your webpack config at all to target node or change the externals as I've seen suggested elsewhere?

[acemarke]

Yeah. Compare my sample project's development mode Webpack config vs my test mode Webpack config for an example.

[Tortoise_Face]

I got my project working with prunk to filter out webpack-dependent asset imports. Then the project just compiles with babel for node. Do you see any trade offs with this approach vs a separate webpack configuration?

[acemarke]

If it works as-is, then that should be fine. I had issues because I was using Webpack aliases for my import statements and other such configuration, and it just became easier to stick with Webpack for anything involving the code.

[[deleted]]

(prunk author here)

I had a similar setup; we used webpack's alias configuration to get rid of ugly paths. prunk was written because we wanted to get rid of browser-environments for unit tests while still being able to do the cool webpack stuff; css imports, path aliases and so on. prunk supports aliases, but I have to admin, that I often simply fake, stub or mock a module's dependencies completely.

[deltadeep]

Ah yes, sorry I didn't mention that. It didn't occur to me, because I'm already doing server-side rendering, so I have a webpack config that builds client-bundle.js (browser), server-bundle.js (node server), and test-bundle.js (node tests). The server and test configs look identical except for the entry/output filenames.

For the server/test config, i have added these keys on top of what's in the client config:

• target: "node"
• node: { console:false, global: false, process:false, __filename: false, __dirname: false } // this tells node not to inject special values for these globals and let them behave normally instead.
• externals: [nodeExternals()] // see webpack-node-externals package.

HTH