eddyerburgh / eddyerburgh/vue-test-loader-example

not able to extract the test block into __tests__ folder within my project structure

Open
#1 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Vue
Stars
7
Forks
1
PR merge metrics
No merged PRs in 30d

Description

Project structure is as follows
![image](https://user-images.githubusercontent.com/18627477/55254301-e32e9e80-522d-11e9-99c4-51ee7bd1e62b.png)

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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.