jestjs - 顺风复杂类(焦点等)和苗条项目中的笑话出错。仅在运行测试时
问题描述
运行应用程序时,在 .svelte 文件中,CSS<style>
完美运行。
当用 jest 执行测试时,如果我使用这样的简单 CSS 选择器就可以了:
<style lang="postcss" type="text/postcss">
form input {
@apply shadow appearance-none border border-transparent rounded w-full py-2 px-3 text-gray-700 leading-tight;
}
但是如果我添加一个像焦点这样的复杂类:
form input {
@apply focus:ring-2 shadow appearance-none border border-transparent rounded w-full py-2 px-3 text-gray-700 leading-tight;
}
我有这个错误:
ParseError: Semicolon or block is expected
at error (node_modules/svelte/src/compiler/utils/error.ts:25:16)
at Parser$1.error (node_modules/svelte/src/compiler/parse/index.ts:101:3)
at Object.read_style [as read] (node_modules/svelte/src/compiler/parse/read/style.ts:31:11)
at tag (node_modules/svelte/src/compiler/parse/state/tag.ts:189:27)
at new Parser$1 (node_modules/svelte/src/compiler/parse/index.ts:53:12)
at parse (node_modules/svelte/src/compiler/parse/index.ts:218:17)
at Object.compile (node_modules/svelte/src/compiler/compile/index.ts:93:14)
at compiler (node_modules/svelte-jester/src/transformer.cjs:32:25)
at Object.process (node_modules/svelte-jester/src/transformer.cjs:11:12)
at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:464:35)
这是我的配置文件:
包.json
{
"name": "svelte-app",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public --no-clear",
"test": "jest --watchAll",
"build:css": "postcss src/tailwind.css -o static/dist/tailwind.css"
},
"devDependencies": {
"@babel/preset-env": "^7.15",
"@babel/core": "^7.15",
"@rollup/plugin-commonjs": "^20.0",
"@rollup/plugin-node-resolve": "^13.0.4",
"@sveltejs/adapter-static": "^1.0.0-next.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/svelte": "^3.0.3",
"@testing-library/user-event": "^13.2.1",
"autoprefixer": "^10.3.1",
"axios": "^0.21.1",
"cssnano": "^5.0.7",
"babel-jest": "26.6.3",
"jest": "26.6.3",
"msw": "^0.34.0",
"postcss": "^8.3.5",
"postcss-load-config": "^3.1.0",
"rollup": "^2.56",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-dev": "^1.1.3",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2",
"svelte": "^3.42.0",
"svelte-check": "^2.2.4",
"svelte-jester": "^1.8.2",
"svelte-preprocess": "^4.7.4",
"tailwindcss": "^2.2.7"
},
"dependencies": {
"autoprefixer": "^10.3.1",
"postcss": "^8.3.5",
"sirv-cli": "^1.0.0",
"tailwindcss": "^2.2.7"
},
"jest": {
"transform": {
"^.+\\.svelte$": "svelte-jester",
"^.+\\.js$": "babel-jest"
}
}
svelte.config.js:
const preprocess = require("svelte-preprocess");
const adapter = require('@sveltejs/adapter-static')
//import preprocess from "svelte/types/compiler/preprocess";
//import adapter from '@sveltejs/adapter-static'
const config = {
preprocess: [preprocess({
"postcss": true
})],
kit: {
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
adapter: adapter({
// default options are shown
pages: 'build',
assets: 'build',
fallback: null,
}),
},
};
module.exports = config;
tailwind.config.js:
const production = !process.env.ROLLUP_WATCH;
const config = {
mode: "jit",
purge: [
'./src/**/*.{html,js,svelte,ts}',
],
theme: {
extend: {
keyframes: {
wiggle: {
'0%, 100%': { 'background-color': 'inherit' },
'50%': { 'background-color': 'rgba(124,58,237, 0.2)' },
}
}
,
animation: {
wiggle: 'wiggle 3s ease-in-out infinite',
}
}
},
plugins: [],
future: {
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true,
}
};
module.exports = config;
postcss.config.js:
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");
const mode = process.env.NODE_ENV;
const dev = mode === "development";
const config = {
plugins: [
//Some plugins, like postcss-nested, need to run before Tailwind,
tailwindcss(),
//But others, like autoprefixer, need to run after,
autoprefixer(),
!dev && cssnano({
preset: "default",
})
],
};
module.exports = config;
babel.config.js:
module.exports = {
'presets': [
[
'@babel/preset-env',
{ targets: { node: 'current' } }
]
]
}
解决方案
所以我发现......我需要"preprocess": true
在我的 package.json 中添加 jest 部分:
""jest": {
"transform": {
"^.+\\.svelte$": [
"svelte-jester",
{
"preprocess": true
}
],
"^.+\\.js$": "babel-jest"
}
}
推荐阅读
- javascript - 使用 React 和 date-fns 构建的日历/行为因时区而异
- css - css React onclick 显示组件
- c# - Twilio 客户端 c#
- python - 如何在 python API 中将列表作为 JSON 响应发送?
- html - 通过单击角度更改列大小
- material-ui - 当对话框关闭时,如何防止打开对话框的 SpeedDialAction 重新聚焦 SpeedDial?
- jenkins - 在 Jenkins 上禁用存储
- linux - linux(ubuntu)上的mongod命令吐出随机消息
- javascript - 带有 javascript 的 Mathjax 插件无法识别内联数学表达式
- aws-api-gateway - 自定义域不适用于无服务器应用程序