Vanilla recipes don't work within Jest in a Next.js project #1131
Comments
|
Any inputs from maintainers or collaborators for this one? We'd really love to give VE a shot, but being unable to test basic components using recipes is a really big blocker / no-go. |
|
Any inputs on this? Facing the same issues. |
|
I just tested version 2.2.0 of @vanilla-extract/next-plugin created by @SukkaW but this issue still persist, nothing changed. |
|
The latest version is 2.2.1 which was released an hour ago. |
|
Thanks for the hint @arnarleifs, I also just tested 2.2.1 as well but still, same error. |
|
Ah ok. Well hopefully it will be resolved soon then 🙂 |
|
I just tried to debug a bit deeper into the issue and found out that a) the VE Jest transformer gets loaded but b) the Next.js mapping rule for CSS files (see here) prevents the execution of the VE Jest transformer; this resulted in the following "final" jest configuration: {
setupFilesAfterEnv: [ '<rootDir>/setupTests.ts' ],
testEnvironment: 'jest-environment-jsdom',
transform: {
'^.+\\.(js|jsx|ts|tsx|mjs)$': [
'/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/swc/jest-transformer.js',
[Object]
],
'\\.css\\.ts$': '@vanilla-extract/jest-transform'
},
moduleNameMapper: {
'^.+\\.module\\.(css|sass|scss)$': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/object-proxy.js',
'^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp)$': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/fileMock.js',
'^.+\\.(svg)$': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/fileMock.js',
'@next/font/(.*)': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/nextFontMock.js',
'next/font/(.*)': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/nextFontMock.js'
},
testPathIgnorePatterns: [ '/node_modules/', '/.next/' ],
transformIgnorePatterns: [ '/node_modules/', '^.+\\.module\\.(css|sass|scss)$' ],
watchPathIgnorePatterns: [ '/.next/' ]
}
{
setupFilesAfterEnv: [ '<rootDir>/setupTests.ts' ],
testEnvironment: 'jest-environment-jsdom',
transform: {
'^.+\\.(js|jsx|ts|tsx|mjs)$': [
'/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/swc/jest-transformer.js',
[Object]
],
'\\.css\\.ts$': '@vanilla-extract/jest-transform'
},
moduleNameMapper: {
'^.+\\.module\\.(css|sass|scss)$': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/object-proxy.js',
'^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp)$': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/fileMock.js',
'^.+\\.(svg)$': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/fileMock.js',
'@next/font/(.*)': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/nextFontMock.js',
'next/font/(.*)': '/localpath/repro-next-vanilla-extract-jest/node_modules/next/dist/build/jest/__mocks__/nextFontMock.js'
},
testPathIgnorePatterns: [ '/node_modules/', '/.next/' ],
transformIgnorePatterns: [ '/node_modules/', '^.+\\.module\\.(css|sass|scss)$' ],
watchPathIgnorePatterns: [ '/.next/' ]
}So I decided to temporarily comment out this line and ran into another issue: So it seems like either:
Could any contributor or maintainer please leave some thoughts on this? |
|
FWIW it seems like the jest transform doesn't actually process vanilla files. I've documented this here as an open question to the team; #1158 |
|
May not be related but I kind of ran into a similar issue with craco, although I'm not using recipes. The way I solved (still testing it) was to put For context, here is the error I've got ● Test suite failed to run
Styles were unable to be assigned to a file. This is generally caused by one of the following:
- You may have created styles outside of a '.css.ts' context
- You may have incorrect configuration. See https://vanilla-extract.style/documentation/getting-started
3 | import { tokens } from './tokens'
4 |
> 5 | export const vars = createGlobalTheme(':root', tokens)
| ^
6 |then, after adding {
'^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': './node_modules/react-scripts/config/jest/babelTransform.js',
'^.+\\.css$': './node_modules/react-scripts/config/jest/cssTransform.js',
'^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': './node_modules/react-scripts/config/jest/fileTransform.js'
'\\.css\\.ts$': '@vanilla-extract/jest-transform', // <- last
}but, still the same error, so I decided to move it first {
'\\.css\\.ts$': '@vanilla-extract/jest-transform', // <- first
'^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': './node_modules/react-scripts/config/jest/babelTransform.js',
'^.+\\.css$': './node_modules/react-scripts/config/jest/cssTransform.js',
'^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': './node_modules/react-scripts/config/jest/fileTransform.js'
}here's my const { CracoAliasPlugin } = require('react-app-alias')
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin')
module.exports = {
plugins: [
{
plugin: CracoAliasPlugin,
options: {},
}
],
webpack: {
plugins: {
add: [
new VanillaExtractPlugin(),
],
},
},
jest: {
configure: (jestConfig) => {
jestConfig.transform = {
...{ '\\.css\\.ts$': '@vanilla-extract/jest-transform' },
...structuredClone(jestConfig.transform),
}
return jestConfig;
},
},
}hope that helps to solve your case |
Hey, any luck with this ? I get this error too in my next project. Would have loved for config below as per Vanilla-extract docs to work right away 😬 |
|
I'm running into the same issue. Any updates on this? |
|
Have the same problem. Not finding a solution anywhere. Any update on this? |
Describe the bug
Description
It seems like that vanilla recipes don't work within Jest tests in Next.js projects. I'm not sure if the issue is related to the base Jest configuration of Next.js or the Jest transformer provided by vanilla extract.
If styles are created via
stylefrom@vanilla-extract/csseverything works as expected, but if you userecipefrom@vanilla-extract/recipesthe test crashes as it can't resolve the exposed function as function.I attached the logs of the full test run including the composed Jest configuration.
Releations
There's also an open discussion from April 19th which is probably also related to this issue.
Reproduction
https://github.com/janbiasi/repro-next-vanilla-extract-jest
Steps of the repro repository
npx create-next-app@latestsrc/folder - Disabled Tailwind, App Router and custom path mappingsexperimental.appDiras this doesn't work according to the issue You forgot to add 'mini-css-extract-plugin' plugin #1101System Info
System: OS: macOS 13.3.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 323.96 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm pnpm: 7.30.0 - ~/Library/pnpm/pnpm Watchman: 2023.06.26.00 - /usr/local/bin/watchman Browsers: Brave Browser: 113.1.51.114 Chrome: 113.0.5672.126 Safari: 16.4 Safari Technology Preview: 16.4 npmPackages: @vanilla-extract/css: ^1.12.0 => 1.12.0 @vanilla-extract/jest-transform: ^1.1.1 => 1.1.1 @vanilla-extract/next-plugin: ^2.1.3 => 2.1.3 @vanilla-extract/recipes: ^0.4.0 => 0.4.0 jest: ^29.6.1 => 29.6.1 jest-environment-jsdom: ^29.6.1 => 29.6.1 next: 13.4.9 => 13.4.9Update on 25.07.2023
Used Package Manager
npm
Logs
Validations
The text was updated successfully, but these errors were encountered: