I am trying to include Jest in my current React app project to do some testing.
This worked great for a simple javascript file, but when I try and reference a file which uses import it throws the error 'Jest encountered an unexpected token'
I've been looking through the following guide and found I didn't have a .bablerc file
https://jestjs.io/docs/en/webpack
So I added one with the following, as per the example, but this has had no affect when I run npm run test
// .babelrc
{
"presets": [["env", {"modules": false}]],
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
My current package.json I have added the following as per the instructions on a different page.
"scripts": {
"test": "jest"
},
My webpack config.js file looks like this.
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';
const javascriptExclude = [];
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
const javascriptExclude = [
/(node_modules|bower_components)/,
path.resolve('./ClientApp/scripts/thirdParty')
];
// if dev build then exclude our js files from being transpiled to help speed up build time
if (isDevBuild) {
javascriptExclude.push(path.resolve('./ClientApp/scripts'));
}
return [
{
stats: { modules: false },
entry: { main: "./ClientApp/index.js" },
resolve: { extensions: [".js", ".jsx"] },
output: {
path: path.join(__dirname, bundleOutputDir),
filename: "[name].js",
publicPath: "dist/"
},
module: {
rules: [
{
test: /\.js$/,
exclude: javascriptExclude,
use: {
loader: "babel-loader",
options: {
presets: ["babel-preset-env", "react", 'stage-2'],
plugins: [
"react-hot-loader/babel",
"transform-class-properties"
],
compact: false
}
}
},
{
test: /\.css$/,
use: isDevBuild
? ["style-loader", "css-loader"]
: ExtractTextPlugin.extract({ use: "css-loader?minimize" })
},
{
test: /\.(jpe|gif|png|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/, use: [
{
loader: 'url-loader',
options: {
limit: 25000,
publicPath: '/dist/'
},
},
]
}
]
},
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require("./wwwroot/dist/vendor-manifest.json")
})
].concat(
isDevBuild
? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: "[file].map", // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(
bundleOutputDir,
"[resourcePath]"
) // Point sourcemap entries to the original file locations on disk
})
]
: [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css"),
new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('production') } })
]
)
}
];
};
Can anyone help?
Aucun commentaire:
Enregistrer un commentaire