I started a new project provided by SvelteKit and added svelte-jester. I am able to run the code and tests but I get an odd coverage problem. The Header component has an SVG file which shows up as an uncovered branch and I'm not sure how to address it.
// Header.svelte
<script lang="ts">
import { page } from '$app/stores';
import logo from './svelte-logo.svg';
</script>
<header>
<div class="corner">
<a href="https://kit.svelte.dev">
<img src={logo} alt="SvelteKit" />
</a>
</div>
</header>
// Header.test.js
import '#testing-library/jest-dom'
import { render } from '#testing-library/svelte'
import Header from '../Header.svelte';
test('shows proper heading when rendered', () => {
const { getByText } = render(Header);
expect(getByText('Corner')).toBeInTheDocument();
});
Coverage:
Wondering if anyone else has had this issue and solved it. There is no branch here and logo is not a prop. How do I get test coverage for the src?
Jest Config for reference:
export default {
bail: false,
collectCoverage: true,
coveragePathIgnorePatterns: ['/jest'],
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80
}
},
moduleFileExtensions: ["js", "svelte", "ts"],
moduleNameMapper: {
"\\.(svg)$": "<rootDir>/src/jest/mock.js",
"^\\$src(.*)$": "<rootDir>/src$1",
"^\\$lib(.*)$": "<rootDir>/src/lib$1",
"^\\$app(.*)$": [
"<rootDir>/.svelte-kit/dev/runtime/app$1",
"<rootDir>/.svelte-kit/build/runtime/app$1"
]
},
preset: "ts-jest",
roots: ["<rootDir>/src/",],
transform: {
"^.+\\.js$": "babel-jest",
"^.+\\.svelte$": [
"svelte-jester", {
"preprocess": true
}
],
"^.+\\.ts$": "ts-jest"
},
// transformIgnorePatterns: ["node_modules"],
setupFilesAfterEnv: [
"#testing-library/jest-dom/extend-expect",
'./src/jest/setup.js'
]
}
Related
I'm trying to solve the Vite build error I get:
RollupError: Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.
The file name reported with this error points to
my web worker code, so I assumed that this setting belongs to the worker section in vite.config.ts:
import { defineConfig } from "vite";
import preact from "#preact/preset-vite";
import basicSsl from "#vitejs/plugin-basic-ssl";
import { NodeGlobalsPolyfillPlugin } from "#esbuild-plugins/node-globals-polyfill";
import { NodeModulesPolyfillPlugin } from "#esbuild-plugins/node-modules-polyfill";
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
export default defineConfig({
plugins: [
preact(),
basicSsl(),
],
server: {
port: 3001,
https: true,
},
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: "globalThis",
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true,
}),
NodeModulesPolyfillPlugin(),
],
},
},
worker: {
rollupOptions: {
output: {
format: "esm",
},
},
},
build: {
rollupOptions: {
plugins: [
// Enable rollup polyfills plugin
// used during production bundling
rollupNodePolyFill(),
],
output: {
format: "esm",
},
},
},
});
Additionally, I set the output format in the build rollup options. However, neither of the two settings are applied and I still get the said error.
What is the correct way to change the rollup output format setting in Vite?
The worker output format must be specified directly in the worker config key, not its rollup options:
import { defineConfig } from "vite";
import preact from "#preact/preset-vite";
import basicSsl from "#vitejs/plugin-basic-ssl";
import { NodeGlobalsPolyfillPlugin } from "#esbuild-plugins/node-globals-polyfill";
import { NodeModulesPolyfillPlugin } from "#esbuild-plugins/node-modules-polyfill";
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
export default defineConfig({
plugins: [
preact(),
basicSsl(),
],
server: {
port: 3001,
https: true,
},
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: "globalThis",
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true,
}),
NodeModulesPolyfillPlugin(),
],
},
},
worker: {
format: "es",
},
build: {
rollupOptions: {
plugins: [
// Enable rollup polyfills plugin
// used during production bundling
rollupNodePolyFill(),
],
output: {
format: "esm",
},
},
},
});
I like using Tailwind CSS in my React and Laravel projects.
Now I've started learning NestJS and I want to use Tailwind CSS in my project, but I couldn't.
Since I couldn't find any results on Google, I'm asking you guys.
I would be grateful for any resource or your detailed answer.
The current state of my project is as follows. I don't know where I went wrong, TailwindCSS is not working.
Please note that I am just starting to learn NestJS.
main.ts
import { NestFactory } from '#nestjs/core';
import { NestExpressApplication } from '#nestjs/platform-express';
import { join } from 'path';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.useStaticAssets(join(__dirname, '..', 'public'));
app.setBaseViewsDir(join(__dirname, '..', 'views'));
app.setViewEngine('hbs');
await app.listen(3000);
console.log(`Application is running on: ${await app.getUrl()}`);
}
bootstrap();
app.controller.ts
import { Controller, Get, Render } from '#nestjs/common';
#Controller()
export class AppController {
#Get()
#Render('index')
root() {
return { message: 'Hello world!' };
}
}
app.module.ts
import { Module } from '#nestjs/common';
import { AppController } from './app.controller';
#Module({
imports: [],
controllers: [AppController],
providers: [],
})
export class AppModule {}
tailwind.config.js
module.exports = {
content: ['./views/*.hbs', './views/**/*.hbs'],
theme: {
extend: {},
},
plugins: [],
};
webpack-hmr.config.js
const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');
module.exports = function (options, webpack) {
return {
...options,
//entry: ['webpack/hot/poll?100', options.entry],
entry: './src/main.ts',
externals: [
nodeExternals({
allowlist: ['webpack/hot/poll?100'],
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
{
test: /\.ts$/,
use: [{ loader: 'ts-loader' }],
},
],
},
plugins: [
...options.plugins,
new webpack.HotModuleReplacementPlugin(),
new webpack.WatchIgnorePlugin({
paths: [/\.js$/, /\.d\.ts$/],
}),
new RunScriptWebpackPlugin({ name: options.output.filename }),
],
};
};
index.hbs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>NestJS App With TailwindCSS</title>
<link rel="stylesheet" href="/assets/css/tailwind.css">
</head>
<body>
<header class="w-full px-8 text-gray-700 bg-white flex">
<h1 class="bg-slate-200">
{{ message }}
</h1>
</header>
</body>
</html>
and script command
"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch",
I hope you're holding on in these hard times. I'm building a React app but by configuring the webpack first. So, I'm trying to use an image by importing it or referencing it in the image tag but it's not working as it should. May anyone please tell me what I'm doing worng? Thanks in advance.
My webpack file
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'index_bundle.js',
publicPath: 'dist'
},
devServer: {
inline: true,
contentBase: './dist',
port: 8080
},
performance: {
hints: 'warning',
maxEntrypointSize: 400000
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{loader: 'babel-loader'},
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(jpg|png|svg)$/,
use:{
loader: 'url-loader',
}
},
{
resolve: {
alias: {
public: path.join(__dirname, '/public')
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
My Navbar file
import { NavbarBrand, Navbar, NavLink } from 'reactstrap';
import logo from '../public/clean_boy';
const imageStyle={
height: "60px",
width: "100%",
padding: "20px 20px -10px 10px",
marginRight: "10px"
}
const NavBar = () => {
return (
<div>
<Navbar dark color="dark">
<NavbarBrand href="/" className="fluid"><img src={logo} style={imageStyle}/>Domestic Workers</NavbarBrand>
<NavLink href="#">Log In</NavLink>
</Navbar>
</div>
)
}
export default NavBar;
Server Error
Module not found: Error: Can't resolve '../public/clean_boy' in '/Users/moise.rwibutso/Andela - Sims Apps/Domestic-workers-system/UI/components'
# ./components/NavBar.js 3:0-39 19:9-13
# ./components/App.js
# ./index.js
ℹ ｢wdm｣: Failed to compile.
Hi I'm getting an error when running my angular unit tests through jest.
Here is the error
Cannot find module '!svg-sprite-loader!node_modules/#my-package/brand-logos/laboratories/img.svg' from 'app.component.ts'
Here is my source code in my app component:
import '!svg-sprite-loader!node_modules/#my-package/brand-logos/laboratories/img.svg' from 'app.component.ts';
#Component({
selector: 'banner-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
...
Here is my jest.config.js
module.exports = {
globals: {
'ts-jest': {
tsConfig: './tsconfig.spec.json',
stringifyContentPathRegex: '\\.html$',
astTransformers: [
require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer')
]
}
},
setupFilesAfterEnv: [
'<rootDir>/node_modules/#angular-builders/jest/dist/jest-config/setup.js'
],
transform: {
'^.+\\.(ts|js|html)$': 'ts-jest'
},
testMatch: [
'**/+(*.)+(spec|test).+(ts|js)?(x)'
],
testEnvironment: 'jest-environment-jsdom-thirteen',
moduleNameMapper: {
'#core/(.*)': '<rootDir>/src/app/core/$1',
'#shared/(.*)': '<rootDir>/src/app/shared/$1'
},
transformIgnorePatterns: ['node_modules/(?!#ngrx)'],
collectCoverageFrom: [
'src/app/**/*.ts',
'!src/app/**/*.module.ts',
'!src/app/**/*.array.ts',
'!src/app/fragmentTypes.ts'
],
moduleFileExtensions: ['ts', 'tsx', 'js', 'json','svg'],
testPathIgnorePatterns: ['e2e','coverage', 'reports','/node_modules/', '/dist/', 'src/app/*.module.{js}'],
snapshotSerializers: [
'jest-preset-angular/AngularSnapshotSerializer.js',
'jest-preset-angular/HTMLCommentSerializer.js'
]
};
How do i modify my config so that jest can use the sprite loader or mock it out?
What I ended up doing was moving all my sprite loader imports into a file that we exclude from unit testing. It's kind of a hack but it works.
I'm creating a single page application using VueJs and I'm facing a problem that all my SVGs are not being rendered. I'm using webpack-simple CLI and I'm using SLDS(Salesforce Lightning Design System) as CSS framework, which is providing me all my svgs.
Here is one of my components which are not displaying the SVGs:
export default {
props: ['tabData']
}
<template>
<li class="slds-context-bar__item slds-context-bar__item_tab" role="presentation">
<a href="javascript:void(0);" class="slds-context-bar__label-action" role="tab" title="Tab Item 2"
aria-selected="false" tabindex="-1" aria-controls="context-tab-panel-3" id="context-tab-id-3">
<div class="slds-icon_container" :title="tabData.tabName">
<svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="../../assets/lightning/assets/icons/standard-sprite/svg/symbols.svg#case"/>
</svg>
</div>
<span class="slds-truncate" :title="tabData.tabName">{{ tabData.tabName }}</span>
</a>
<div class="slds-context-bar__icon-action slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-p-left_none slds-p-right_none">
<button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small"
aria-haspopup="true"
tabindex="-1">
<svg class="slds-button__icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="../../assets/lightning/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"/>
</svg>
</button>
</div>
<div class="slds-context-bar__icon-action slds-col_bump-left slds-p-left_none">
<button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small"
tabindex="-1" :title="'Fechar ' + tabData.tabName">
<svg class="slds-button__icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="../../assets/lightning/assets/icons/utility-sprite/svg/symbols.svg#close"/>
</svg>
</button>
</div>
</li>
</template>
This component above is called in other component named GlobalNavigation:
import DashboardTab from '../navigation-tabs/DashboardTab.vue';
import TabsContainer from '../navigation-tabs/TabsContainer.vue';
import NavigationTab from '../navigation-tabs/NavigationTab.vue';
export default {
data() {
return {
navigationTabs: [
{
tabName: 'Organizações',
hasMenu: true
},
{
tabName: 'Contas',
hasMenu: false
}
]
};
},
components: {
ursusDashboardTab: DashboardTab,
ursusTabsContainer: TabsContainer,
ursusNavigationTab: NavigationTab
}
}
.slds-global-navigation {
margin-top: 50px;
}
<template>
<div class="slds-global-navigation">
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<ursus-dashboard-tab></ursus-dashboard-tab>
</div>
<ursus-tabs-container>
<ursus-navigation-tab
v-for="tab in navigationTabs"
:tabData="tab"/>
</ursus-tabs-container>
</div>
</div>
</template>
And finally GlobalNavigation is called in my App.vue file
export default {
data() {
return {
displayTrialBar: false,
displayAlert: false
}
}
}
.slds-unscrollable-page {
overflow: hidden;
}
<template>
<div class="slds-unscrollable-page">
<ursus-trial-bar v-if="displayTrialBar"></ursus-trial-bar>
<ursus-alert v-if="displayAlert"></ursus-alert>
<ursus-global-header></ursus-global-header>
<ursus-global-navigation></ursus-global-navigation>
<ursus-main-area></ursus-main-area>
</div>
</template>
And here you can check my main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import App from './App.vue';
import {routes} from './routes';
import { store } from './store';
import TrialBar from './components/global/TrialBar.vue';
import Alert from './components/global/Alert.vue';
import GlobalHeader from './components/global/GlobalHeader.vue';
import GlobalNavigation from './components/global/GlobalNavigation.vue';
import MainArea from './components/global/MainArea.vue';
import PageHeader from './components/page/PageHeader.vue';
import PageBody from './components/page/PageBody.vue';
Vue.use(VueRouter);
Vue.use(VueResource);
Vue.component('ursus-trial-bar', TrialBar);
Vue.component('ursus-alert', Alert);
Vue.component('ursus-global-header', GlobalHeader);
Vue.component('ursus-global-navigation', GlobalNavigation);
Vue.component('ursus-main-area', MainArea);
Vue.component('ursus-page-header', PageHeader);
Vue.component('ursus-page-body', PageBody);
const router = new VueRouter({
routes,
mode: 'history'
});
new Vue({
el: '#app',
store,
router,
render: h => h(App)
})
And also here is my webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
What does your browser debug show? Your svgs have <use> tags with relative urls. These will be resolved by the browser, and it's likely that they're not pointing to where you think. Your browser network tab should tell you what's going on?