TL;博士
- 你如何告诉 SWC 编译在 React 组件中导入的 CSS 文件？
- 你如何告诉 SWC 在测试和 React 组件中编译绝对导入？
语境
我们正在从 Babel 迁移到SWC。（我刚才问了一个问题。我正在改进那个问题的答案。）
我们从以下位置迁移命令：
"test": "NODE_ENV=test riteway -r @babel/register 'src/**/*.test.js' | tap-nirvana",
至
"test": "SWC_NODE_PROJECT=./jsconfig.json riteway -r @swc-node/register src/**/*.test.js | tap-nirvana",
jsconfig.json看起来像这样：
{
"compilerOptions": {
"allowJs": true,
"baseUrl": "./src",
"jsx": "react-jsx"
}
}
如果我们编写尝试为自包含组件（没有绝对导入，没有 CSS）编译测试，它可以工作：
import { describe } from 'riteway';
import render from 'riteway/render-component';
function HomePageComponent({ user: { email } }) {
return <p>{email}</p>;
}
describe('home page component', async assert => {
const user = { email: 'foo' };
const $ = render(<HomePageComponent user={user} />);
assert({
given: 'a user',
should: 'render its email',
actual: $('p').text(),
expected: user.email,
});
});
测试编译良好。
使用 Babel，我们有.babelrc这样的：
{
"env": {
"test": {
"plugins": [
[
"module-resolver",
{
"root": [
"."
],
"alias": {
"components": "./src/components",
"config": "./src/config",
"features": "./src/features",
"hocs": "./src/hocs",
"hooks": "./src/hooks",
"pages": "./src/pages",
"redux": "./src/redux",
"styles": "./src/styles",
"tests": "./src/tests",
"utils": "./src/utils"
}
}
]
]
}
},
"presets": [
[
"next/babel",
{
"ramda": {}
}
]
],
"plugins": [
["styled-components", { "ssr": true }]
]
}
样式由 styled-components 处理，而绝对导入则通过module-resolver插件定义。（我们从样式化组件切换到 CSS 模块，这就是我们从.module.cssCSS 文件导入的原因。无论如何......）
如果我们编写测试，我们希望如何使用它们的实际导入来编写它，如下所示：
import { describe } from 'riteway';
import render from 'riteway/render-component';
import { createPopulatedUserProfile } from 'user-profile/user-profile-factories';
import HomePageComponent from './home-page-component';
describe('home page component', async assert => {
const user = createPopulatedUserProfile();
const $ = render(<HomePageComponent user={user} />);
assert({
given: 'a user',
should: 'render its email',
actual: $('p').text(),
expected: user.email,
});
});
它失败了：
$ SWC_NODE_PROJECT=./jsconfig.json riteway -r @swc-node/register src/features/home/home-page-component.test.js | tap-nirvana
/Users/janhesters/dev/my-project/src/features/home/home.module.css:1
(function (exports, require, module, __filename, __dirname) { .container {
^
SyntaxError: Unexpected token '.'
当我们在 CSS 导入中离开时home-page-component.js，或者使用：
$ SWC_NODE_PROJECT=./jsconfig.json riteway -r @swc-node/register src/features/home/home-page-component.test.js | tap-nirvana
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module 'user-profile/user-profile-factories'
Require stack:
- /Users/janhesters/dev/my-project/src/features/home/home-page-component.test.js
- /Users/janhesters/dev/my-project/node_modules/riteway/bin/riteway
分别，当我们摆脱 CSS 导入时。
我们如何帮助 SWC 理解 CSS（或模拟 CSS 模块）以及我们如何帮助它理解绝对导入？
我们已经设置baseUrl了jsconfig.json...