Open janbiasi opened 1 year ago
janbiasi
commented
1 year ago 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.
arnarleifs
commented
1 year ago Any inputs on this? Facing the same issues.
janbiasi
commented
1 year ago I just tested version 2.2.0 of @vanilla-extract/next-plugin created by @SukkaW but this issue still persist, nothing changed. @mattcompiles could you please re-open this issue as #1105 did not fix this?
arnarleifs
commented
1 year ago The latest version is 2.2.1 which was released an hour ago.
janbiasi
commented
1 year ago Thanks for the hint @arnarleifs, I also just tested 2.2.1 as well but still, same error.
I also guess that the issue is caused by the jest transformer in conjunction with next/jest.
arnarleifs
commented
1 year ago Ah ok. Well hopefully it will be resolved soon then 🙂
janbiasi
commented
1 year ago 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:
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
1 | import { recipe } from "@vanilla-extract/recipes";
2 |
> 3 | export const buttonStyle = recipe({
| ^
4 | base: {
5 | display: "flex",
6 | backgroundColor: "white",
at Object.getFileScope (node_modules/@vanilla-extract/css/fileScope/dist/vanilla-extract-css-fileScope.browser.cjs.js:35:11)
at Object.<anonymous> (src/components/Button.css.ts:3:34)
at Object.<anonymous> (src/components/Button.tsx:13:20)
at Object.<anonymous> (src/components/Button.test.tsx:7:17)So it seems like either:
@vanilla-extract/jest-transform simply doesn't work with recipes as documented (my guess)Could any contributor or maintainer please leave some thoughts on this?
sebtoombs
commented
1 year ago 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; https://github.com/vanilla-extract-css/vanilla-extract/discussions/1158
well1791
commented
1 year ago 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 @vanilla-extract/jest-transform before any other transformer matching .ts
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 @vanilla-extract/jest-transform I ended up having this order
{
'^.+\\.(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 craco.config.js file for future reference (I tend to forget things)
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
graftcode
commented
11 months ago Thanks for the hint @arnarleifs, I also just tested 2.2.1 as well but still, same error. I also guess that the issue is caused by the jest transformer in conjunction with
next/jest.
Hey, any luck with this ?
I get this error too in my next project.
Error: Uncaught [TypeError: (0 , _Buttoncss.buttonStyle) is not a function]Would have loved for config below as per Vanilla-extract docs to work right away 😬
{
"transform": {
"\\.css\\.ts$": "@vanilla-extract/jest-transform"
}
}
badtant
commented
9 months ago I'm running into the same issue. Any updates on this?
TypeError: (0 , _PlayTextcss.PlayTextStyles) is not a function
tylerruss
commented
8 months ago Have the same problem. Not finding a solution anywhere. Any update on this?
Palmaswell
commented
5 months ago We are also experiencing the same issue at our organization where the @vanilla-extract/jest-transform plugin is not working with next/jest.js. Whenever we try to run a React component test, we get the following error:
Error: Uncaught [TypeError: _Buttoncss.button is not a function]I hope the team can find time to address this issue or point out how to fix it.
janbiasi
commented
5 months ago There was no input from contributors on this issue in the last year. If someone would have sufficient knowledge in the next/jest package and VE itself I'm sure one could propose corresponding PRs to fix the issue based on my last findings from august 2023.
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 https://github.com/vanilla-extract-css/vanilla-extract/issues/1101System Info
Update on 25.07.2023
Used Package Manager
npm
Logs
Validations