Aquí hay un ejemplo mínimo reproducible.
Estamos migrando de Babel a SWC . (Hice una pregunta hace un rato. Estoy mejorando la respuesta de esa pregunta).
Hemos migrado el comando desde:
"test": "NODE_ENV=test riteway -r @babel/register 'src/**/*.test.js' | tap-nirvana",para
"test": "SWC_NODE_PROJECT=./jsconfig.json riteway -r @swc-node/register src/**/*.test.js | tap-nirvana", donde el jsconfig.json se ve así:
{ "compilerOptions": { "allowJs": true, "baseUrl": "./src", "jsx": "react-jsx" } }Si escribimos intenta compilar una prueba para un componente autónomo (sin importaciones absolutas, sin CSS), funciona:
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, }); });La prueba compila bien.
Con Babel teníamos un .babelrc como este:
{ "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 }] ] } Donde los estilos fueron atendidos por componentes con estilo y las importaciones absolutas fueron definidas a través del complemento module-resolver . (Nos cambiamos de componentes con estilo a módulos CSS, razón por la cual importamos desde archivos CSS .module.css . De todos modos ...)
Si escribimos la prueba como queríamos escribirla con sus importaciones reales así:
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, }); });Falla con:
$ 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 '.' cuando salimos en la importación de CSS en home-page-component.js , o con:
$ 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/ritewayrespectivamente, cuando nos deshacemos de la importación de CSS.
¿Cómo podemos ayudar a SWC a comprender CSS (o módulos CSS simulados) y cómo podemos ayudarlo a comprender las importaciones absolutas?
Ya configuramos la baseUrl en jsconfig.json ...
Acerca de la ruta absoluta
Ya agregó baseUrl en el archivo jsconfig.json pero no agregó las rutas, debe modificar su archivo de configuración como el mío:
{ "compilerOptions": { "baseUrl": "./src", "paths": { "@screens": ["./screens"], "@shared": ["./shared"], "@shared/*": ["./shared/*"] }, Las rutas son el alias de module-resolver , y supongo que su root no debería ser "." , debería ser exactamente como su archivo jsconfig.json , me refiero al valor baseUrl .
"plugins": [ [ "module-resolver", { "root": ["./src"], "extensions": [".ts", ".tsx", ".js", ".jsx", ".json"], "alias": { "@screens": "./src/screens", "@shared": "./src/shared" } } ] ], Si tiene Webpack, debe tener una configuración de alias en su clave de resolve del objeto de configuración de Webpack, como el mío:
const resolve = { extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], alias: { '@screens': path.join(__dirname, 'src/screens/'), '@shared': path.join(__dirname, 'src/shared/'), }, modules: ['src', 'node_modules'], descriptionFiles: ['package.json'], };Acerca de CSS
En realidad, está utilizando un archivo CSS como CSS-Modules, no como el documento NexJS recomendado , en los documentos, el desarrollador debe importar CSS como import './styles.css' y luego usarlo como string en JSX como <div className="main"
Pero
Lo estás importando como un módulo (CSS-Module):
// you did it import styles from './styles.css'; <div className={styles.main}Como sabe, es compatible con este documento , es compatible con NextJS, pero SWC no puede entenderlo. Dediqué horas a encontrar una forma de hacerlo, pero parece que SWC aún no es compatible con CSS-Module. debe crear su propio complemento para que SWC admita CSS-Module.
styled-components del complemento se encargaron de esto. Deberá hacer lo mismo con SWC. No puedo encontrar un complemento SWC existente que haga esto, pero puede implementar el suyo propio . Obviamente, esto es una molestia, pero tal es el costo de usar herramientas nuevas..swrc para baseUrl y paths deberían hacer lo que desea, pero eso también parece tener algunos problemas . Es posible que tenga más suerte creando problemas directamente en el repositorio @swc-node GitHub, pero dados los comentarios allí, parece que podría ser SOL por un tiempo. Podría ser más rápido/más fácil reescribir sus pruebas usando una de las bibliotecas que Next admite de fábrica.
Pude resolver todos los problemas sin escribir ningún complemento. Empujé la solución a mi repositorio de ejemplo de la pregunta.
En primer lugar, utilice el registro oficial del proyecto SWC . Esto significa que debe compilar sus pruebas de esta manera:
"test": "riteway -r @swc/register 'src/**/*.test.js' | tap-nirvana",Puedes instalarlo ejecutando:
yarn add --dev @swc/core @swc/register Necesitamos esta versión de registro, porque tiene en cuenta un archivo .swcrc , que el otro no.
En segundo lugar, necesita tanto "path" como "baseUrl" para corregir las importaciones absolutas porque, por alguna razón, SWC no infiere todas las rutas con solo una "baseUrl" proporcionada. Y necesita adaptar su .swcrc para manejar React.
{ "jsc": { "baseUrl": "./src", "paths": { "*.css": ["utils/identity-object-proxy.js"], "utils/*": ["utils/*"] }, "parser": { "jsx": true, "syntax": "ecmascript" }, "transform": { "react": { "runtime": "automatic" } } }, "module": { "type": "commonjs" } } En tercer lugar, para resolver .css , debe reasignar todas las importaciones a archivos .css a un proxy de objeto de identidad, que puede ver en el ejemplo de .swcrc anterior. Un proxy de objeto de identidad es un objeto que, cuando hace referencia a cualquier propiedad, devuelve la clave en forma de cadena a la que intenta hacer referencia. Puedes crear uno tú mismo así:
const identityObjectProxy = new Proxy( {}, { get: function getter(target, key) { if (key === '__esModule') { return false; } return key; }, }, ); export default identityObjectProxy; Para que la reasignación de .css entre en vigor, debe hacer que todas sus importaciones a archivos .css sean importaciones absolutas. ( import styles from './styles.module.css no funcionará!)