webpack adding testing module with mocha and chai - reactjs

Question

So I have just started using mocha and chai (testing in browser), currently my webpack.config file for my app looks like this:
var webpack = require('webpack');
module.exports ={
entry: ["./js/app.js"],
output: {
path: "./js",
filename:"bundle.js"
},
module:{
loaders: [
{
test: [/\.es6$/, /\.js$/],
exclude: /(css|plugins|node_modules)/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
},
{
test: [/\.scss$/],
loaders: ['style', 'css', 'sass']
}
]
},
plugins:[
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
resolve: {
extensions: ['', '.js', '.es6', '.jsx']
},
watch: false
}
Now my test folder is in the root directory, but let's say I want to use import/export, and import some react component for testing, what is the best practice?
do I have to create multiple entry point and output? One for my main app, one for the testing stuff, but how do I output the bundles in different directory. Or should I just create another webpack.config for the testing folder itself?

Answer 1

Each test you write will be in its own .js file. Your test runner will execute each of your test files independently.
Also your tests will not reference your bundle but, instead, import the required file(s) directly. You don't want to include the entire bundle during testing, as that adds a lot of code you do not need and can muddy your test development. Including only what is necessary means there is a much smaller footprint on what can interfere with your test results.
A useful link that covers getting setup for testing React components can be found:
https://www.toptal.com/react/how-react-components-make-ui-testing-easy
Also, Facebooks page for Reacts testing utilities:
https://facebook.github.io/react/docs/test-utils.html