Comments (10)
Somehow it seems like the webpack-compiled code doesn't have access to the chai object that was configured by the spec helper.
Yep, that's the reason. This issue is caused by webpack when node_modules are not excluded from bundling. Then you have 2 versions of your node_modules and webpack uses it's own bundled version...
If I rename specHelpler.js to specHelper-spec.js, then it works as I expect; however, if I run mocha-webpack with the --watch option and then change a test, I get the same error message again because the specHelper-spec.js file wasn't reloaded by --watch.
This includes your specHelper to webpacks bundle and affects the used modules for the initial run. But when you change a file, webpack rebuilds the bundle and only those files which are affected by this change will be executed again.
Excluding node_modules feels more like a workaround, but it's the simplest solution for this issue. Have a look at webpack-node-externals to exclude them. The bundle process is also faster with this plugin ;)
For a real solution, we need to make sure that node & webpack shares their instances of modules - when needed.
from mocha-webpack.
I originally tried using webpack-node-externals as you show in the README, but ran into other issues. I can't remember what they were off the top of my head, but I'll re-try that when I get a chance and report back.
from mocha-webpack.
OK, I've had a chance to re-investigate, and the problem was unrelated to this module. We're using eslint-plugin-import, and when we use webpack-node-externals, the import/no-unresolved
rule complains about every import
statement we have in our codebase.
from mocha-webpack.
@zinserjan Do you have any ideas on how to accomplish what you said above?
For a real solution, we need to make sure that node & webpack shares their instances of modules - when needed.
I'm happy to try to work on a PR for this, but I'm not sure where to start with it. If you could point me in a direction, I'll see what I can do.
from mocha-webpack.
Thought a lot about this the last days and I'm still not sure how to solve it...
The main problem is, that webpack creates it's own js bundle with all necessary modules. If we use --require some-code.js
then "some-code.js" will be executed inside node's environment and all enhancements to modules are only applied in this env. Everything works fine until webpack bundles some of the used dependencies in "some-code.js" into it's own bundle.
Then the enhancements to this dependencies are lost, cause webpack uses it's own version/instance of this module... This behavior breaks your code when it depends on some enhancements like helper methods for chai.
I see the following solutions for this problem:
- exclude used dependencies in
--require
files from webpack's bundle- dependencies are managed by node --> shared instances
- include all
--require
calls also to webpack's bundle- code executes just twice --> nothing shared, but should work in the most cases
- could lead to side effects when you need a shared or non-changing instance of a module
- provide another command line option (
--include
) to prepend all supplied files to webpack's bundle.--require
can be used for run-time enhancements like mocha-clean--include
can be used to include some files into webpack's bundle like test helpers
The more I think about the first solution the more I come to the result, that there will probably never a bullet-proof solution for this. In theory it would be enough to externalize all used dependencies in -require
files. But to implement this, we have to enhance the (existing) webpack config with some externals and this could break easily when there is already a externals helper defined that interact in some other way...
Second way feels more a like a hack than a solution.
Third is probably the way to go. It just includes the code into webpack's bundle, so it just works for use cases like spec helpers. Shared instances are also possible - with a custom externals configuration.
And for run-time enhancements there's still the --require
option.
What do you think?
from mocha-webpack.
My knowledge of how webpack works is pretty weak, but I think option 3 sounds best as well. What's not clear to me is whether the --include
option will continue to work when using --watch
. If I --include
my spec helper that configures some chai plugins, will those continue to be available in subsequent test runs, even if the spec helper doesn't get reloaded? If the answer is yes, then --include
addresses my use case.
I don't have enough knowledge or understanding of webpack to know whether there will be other undesirable effects of doing this.
I can try to come up with something along these lines when I get some open-source time, but if you see a clear path to implementing this, then go for it.
from mocha-webpack.
If I --include my spec helper that configures some chai plugins, will those continue to be available in subsequent test runs, even if the spec helper doesn't get reloaded?
Yes! That's the idea.
Added a PR for this. But before I'll merge this, I wanna test it on windows and try it with a real project.
from mocha-webpack.
I just tried out your PR branch on one of my projects, and it worked perfectly. Thanks for that! I don't have a Windows setup to test on, but consider it successful on a real project!
from mocha-webpack.
Cool. Windows looks good, too.
Released as 0.3.0
from mocha-webpack.
Updated all of my affected projects, and everything works great! Thanks so much for solving this issue!
from mocha-webpack.
Related Issues (20)
- Error when using `--watch` flag as documented HOT 1
- An in-range update of loader-utils is breaking the build 🚨 HOT 6
- An in-range update of interpret is breaking the build 🚨 HOT 1
- An in-range update of chalk is breaking the build 🚨 HOT 1
- Dies silently HOT 1
- RUNTIME EXCEPTION Exception occurred while loading your tests Cannot read property 'assign' HOT 1
- Compatibility issue with webpack > 4.28.3 HOT 5
- `Mochapack` a fork of `mocha-webpack` released with Mocha 6 support HOT 14
- An in-range update of source-map-support is breaking the build 🚨 HOT 9
- An in-range update of is-glob is breaking the build 🚨 HOT 1
- An in-range update of tiny-worker is breaking the build 🚨 HOT 2
- Cannot find module - VueSSRServerPlugin
- Solved: Mocha 6, Webpack 4, Cyclic dependencies Errors HOT 3
- jsdom is not a function + SecurityError localStorage workaround
- allow-uncaught ?
- Mocha Chai vue testing a vue component : this.$notify is not a function HOT 1
- Conflict: Multiple assets emit to the same filename bundle.js
- WEBPACK Failed to compile with 1 error TypeError: mocha.useColors is not a function HOT 2
- You may need an appropriate loader
- Webpack 5 support HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mocha-webpack.