eddyerburgh / eddyerburgh/vue-test-loader-example
not able to extract the test block into __tests__ folder within my project structure
- Dominant language
- Vue
- Stars
- 7
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
Project structure is as follows

My webpack.test.js file is as follows
where base config is the main webpack config file
```
var baseConfig = require('./webpack.dev').outreach
const merge = require('webpack-merge')
// no need for app entry during tests
const testConfig = merge(baseConfig, {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'test': 'vue-test-loader'
},
}
}
]
}
})
module.exports = testConfig
```
Base config looks like this
'use strict'
const path = require('path')
const webpack = require('webpack')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const StyleLintPlugin = require('stylelint-webpack-plugin')
const config = require('./config')
const _ = require('./utils')
const resolve = p => {
return path.resolve(__dirname, `../${p}`)
}
```
module.exports = {
externals: {
// require("jquery") is external and available
// on the global var jQuery
'jquery': 'jQuery'
},
resolve: {
extensions: ['.ts', '.js', '.vue', '.css', '.json', '.scss'],
alias: {
root: resolve('client'),
components: resolve('client/components'),
UIkit: resolve('client/UIkit'),
styles: resolve('client/styles'),
lib: resolve('client/lib'),
helpers: resolve('client/helpers/helpers'),
img: resolve('client/img'),
media: resolve('client/media'),
stores: resolve('client/stores/stores'),
api: resolve('client/api/api'),
definitions: resolve('client/definitions'),
statusFlow: resolve('client/components/Sections/statusFlow.ts'),
vue: resolve('node_modules/vue/dist/vue.js'),
mocks: resolve('__tests__/unit/mocks')
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
enforce: 'pre',
use: [{
loader: 'eslint-loader',
options: config.eslint
}]
},
{
test: /\.vue$/,
use: [{
loader: 'vue-loader',
options: config.vue
}]
},
{
test: /\.ts$/,
use: [
'babel-loader',
{
loader: 'ts-loader',
options: {
// appendTsSuffixTo: [/\.vue$/],
transpileOnly: true
}
}
],
exclude: /node_modules/
},
{
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/
},
{
test: /\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp3)(\?.*)?$/,
use: [{
loader: 'file-loader',
options: {
name: 'media/[name].[hash:8].[ext]'
}
}]
},
{
test: /\.svg$/,
use: ['svg-url-loader']
},
{
test: /\.ico$/,
use: [{
loader: 'file-loader',
options: {
name: './[name].[ext]'
}
}]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new ForkTsCheckerWebpackPlugin({
tsconfig: resolve('tsconfig.json'),
vue: true
// async: false // This will make the build fail on typescript errors, but take twice as long
}),
new StyleLintPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
],
target: _.target
}
```
When I run `npm run build:test` alias for webpack run, it doesn't generate a `__tests__` folder.
Any help will be greatly appreciated! Thank you.
Regards
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.