vitest fails with component library with styled-components #5286
-
Describe the bugI have a lib with the following structure: My package.json{
"name": "@bee-ui/bee-ui",
"version": "1.2.4",
"type": "module",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/bee-ui.js",
"require": "./dist/bee-ui.umd.cjs"
}
},
"main": "./dist/bee-ui.umd.cjs",
"types": "./dist/index.d.ts",
"files": [
"dist"
],
"scripts": {
"build": "yarn build:clean && tsc && vite build",
"build-storybook": "storybook build",
"build:clean": "rimraf dist",
"clean": "rimraf node_modules dist coverage",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"lint:fix": "prettier --write \"./**/*.{ts,tsx}\" && eslint . --ext .ts,.tsx --fix",
"publish": "yarn npm publish",
"storybook": "storybook dev -p 6006",
"test": "vitest run",
"test:watch": "vitest"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"lodash.isempty": "^4.4.0",
"lodash.merge": "^4.6.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^6.1.8"
},
"devDependencies": {
"@storybook/addon-essentials": "^7.6.12",
"@storybook/addon-interactions": "^7.6.12",
"@storybook/addon-links": "^7.6.12",
"@storybook/addon-onboarding": "^1.0.11",
"@storybook/blocks": "^7.6.12",
"@storybook/react": "^7.6.12",
"@storybook/react-vite": "^7.6.12",
"@storybook/test": "^7.6.12",
"@testing-library/dom": "^9.3.4",
"@testing-library/jest-dom": "^6.4.1",
"@testing-library/react": "^14.2.1",
"@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.12",
"@types/jsdom": "^21.1.6",
"@types/lodash.isempty": "^4.4.9",
"@types/lodash.merge": "^4",
"@types/react": "^18.2.51",
"@types/react-dom": "^18.2.18",
"@types/styled-components": "^5.1.34",
"@typescript-eslint/eslint-plugin": "^6.20.0",
"@typescript-eslint/parser": "^6.20.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"eslint-plugin-storybook": "^0.6.15",
"jest-styled-components": "^7.2.0",
"jsdom": "^23.2.0",
"prettier": "^3.2.4",
"rimraf": "^5.0.5",
"storybook": "^7.6.12",
"typescript": "^5.3.3",
"vite": "^5.0.12",
"vite-plugin-dts": "^3.7.2",
"vitest": "^1.2.2"
},
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"packageManager": "yarn@4.0.2",
"engines": {
"node": ">=20.11.0",
"npm": ">=10.2.4"
}
}My `vite.config.ts` fileimport { join, resolve } from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dts from "vite-plugin-dts";
import { UserConfigExport } from "vitest/config";
import { compilerOptions } from "./tsconfig.json";
const sanitizeAlias = (val: string): string => val.replace("/*", "");
const aliasWithAbsolutePath = Object.entries(compilerOptions.paths).reduce(
(acc: { [key: string]: string }, [key, value]) => {
acc[sanitizeAlias(key)] = sanitizeAlias(join(__dirname, value[0]));
return acc;
},
{} as { [key: string]: string },
);
const config: UserConfigExport = {
test: {
globals: true,
environment: "jsdom",
setupFiles: ["./src/tests/setup.ts"],
},
build: {
lib: {
entry: resolve(__dirname, "src/main.tsx"),
name: "BeeUi",
fileName: "bee-ui",
},
rollupOptions: {
external: ["react", "react-dom", "styled-components"],
output: {
globals: {
react: "React",
"styled-components": "styled",
"react-dom": "ReactDOM",
},
},
},
},
plugins: [react(), dts({ rollupTypes: true })],
resolve: {
alias: aliasWithAbsolutePath,
},
};
export default defineConfig(config);My `tsconfig.json`{
"compilerOptions": {
"baseUrl": ".",
"declaration": true,
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"paths": {
"@tests/*": [
"src/tests/*"
],
"@themes/*": [
"src/themes/*"
]
}
},
"include": ["src", "vite.config.ts", "tsconfig.json"],
"references": [{ "path": "./tsconfig.node.json" }],
"exclude": ["node_modules", "dist"]
}My `tsconfig.node.json`{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts", "tsconfig.json"]
}My `main.tsx`export { Typography } from "./atoms/typography";My `Typography` component:import { ReactNode } from "react";
import styled from "styled-components";
export type Variants = "h1";
export interface TypographyProps {
variant: Variants;
children: ReactNode;
className?: string;
}
const H1 = styled.h1`
color: ${({ theme }) => theme.color.neutral.dark};
font-size: 32px;
line-height: 40px;
font-weight: 700;
`;
const variantMapping = {
h1: H1,
};
export const Typography = ({
variant = "h2",
children,
className,
}: TypographyProps) => {
const Component = variantMapping[variant];
return <Component className={className}>{children}</Component>;
};ReproductionWhen publishing this library to a private repository, I tried to create a test like this: import App from './App'
import { render, screen, userEvent } from './utils/test-utils'
import { Typography } from "@bee-ui/bee-ui";
describe('Simple working test', () => {
test("should not render when user is not master", async () => {
render(<Typography variant="h1">H1 content</Typography>);
expect(screen.getByText(/h1 content/i)).toBeInTheDocument();
});
})
Even using the example environment from the vitest documentation: https://github.com/vitest-dev/vitest/tree/main/examples/react-testing-lib, this test fails with a generic message: System InfoTypeError: e.h1 is not a function
at file:///vitest/examples/react-testing-lib/node_modules/@bee-ui/bee-ui/dist/main.js:1:84
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at ESMLoader.import (node:internal/modules/esm/loader:530:24)
at VitestExecutor.interopedImport (file://vitest/examples/react-testing-lib/node_modules/vite-node/dist/client.mjs:383:28)
at VitestExecutor.directRequest (file://vitest/examples/react-testing-lib/node_modules/vite-node/dist/client.mjs:253:24)
at VitestExecutor.cachedRequest (file://vitest/examples/react-testing-lib/node_modules/vite-node/dist/client.mjs:189:14)
at VitestExecutor.dependencyRequest (file://vitest/examples/react-testing-lib/node_modules/vite-node/dist/client.mjs:233:12)
at vitest/examples/react-testing-lib/src/App.test.tsx:4:31
at VitestExecutor.runModule (file:///vitest/examples/react-testing-lib/node_modules/vite-node/dist/client.mjs:362:5)Used Package Managernpm Validations
|
Beta Was this translation helpful? Give feedback.
Replies: 7 comments 25 replies
-
|
It's a bit hard to digest the issue from that long description. Could you move your code into a github repo or provide code on stackblitz so that we can investigate the issue more easily? |
Beta Was this translation helpful? Give feedback.
-
|
Hello @gabriel-naressi. Please provide a minimal reproduction using a GitHub repository or StackBlitz (you can also use examples). Issues marked with |
Beta Was this translation helpful? Give feedback.
-
|
@hi-ogawa unfortunately I can't do this because the code is in a private company repository and has settings that I can't share. If you need any information that isn't there, tell me and I'll share it if I can. |
Beta Was this translation helpful? Give feedback.
-
|
Maybe you misunderstood, so let me clarify. I'm not asking a full project, but it would be easy for us if you can at least put together all "My ... file" into a repository or stackblitz and provide a link to it. Would it be possible? |
Beta Was this translation helpful? Give feedback.
-
|
@hi-ogawa ooh ok, i can do this! Give me a few minutes |
Beta Was this translation helpful? Give feedback.
-
|
@hi-ogawa There it is: https://stackblitz.com/edit/vitejs-vite-moqufx?file=src%2Fatoms%2F__tests__%2Ftypography.spec.tsx |
Beta Was this translation helpful? Give feedback.
-
|
@hi-ogawa one additional piece of information that I forgot to add is that this problem only happens when I run the test. When I manually test the application, this |
Beta Was this translation helpful? Give feedback.
-
|
I assume Without this, I cannot tell exactly, but it's likely that either // vite.config.ts
export default defineConfig({
test: {
server: {
deps: {
inline: ["@bee-ui/bee-ui"],
}
}
},
}); |
Beta Was this translation helpful? Give feedback.
-
|
Hi @hi-ogawa, the sugestion of put @bee-ui/bee-ui into There is the top of the transpiled `@bee-ui/bee-ui/dist/main.js`And the lines around `e.h1`:I don't know if this involves the lines you wanted, but I can share more lines if needed |
Beta Was this translation helpful? Give feedback.
-
|
It might still fail but I'm hoping that something would be different. If you cannot provide a reproduction, could you take a closer look and debug something yourself? (for example, what I would do is to put Actually I'm expecting it to work if https://stackblitz.com/edit/vitest-dev-vitest-jltwtr?file=test%2Frepro.test.ts import styled from 'styled-components';
import { test, expect } from 'vitest';
test('styled', () => {
console.log(styled.h1);
expect(styled.h1).toBeDefined();
});Maybe you got more packages like |
Beta Was this translation helpful? Give feedback.
-
|
Hi @hi-ogawa I think I found the problem, but idk what do to. In my There is my full `vite.config.ts` file:import { join, resolve } from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dts from "vite-plugin-dts";
import { UserConfigExport } from "vitest/config";
import { compilerOptions } from "./tsconfig.json";
const sanitizeAlias = (val: string): string => val.replace("/*", "");
const aliasWithAbsolutePath = Object.entries(compilerOptions.paths).reduce(
(acc: { [key: string]: string }, [key, value]) => {
acc[sanitizeAlias(key)] = sanitizeAlias(join(__dirname, value[0]));
return acc;
},
{} as { [key: string]: string },
);
const config: UserConfigExport = {
test: {
globals: true,
environment: "jsdom",
setupFiles: ["./src/tests/setup.ts"],
},
build: {
lib: {
entry: resolve(__dirname, "src/main.tsx"),
formats: ["es", "cjs"],
name: "BeeUi",
fileName: (format) => `bee-ui.${format}.js`,
},
rollupOptions: {
external: ["react", "react-dom"],
output: {
globals: {
react: "React",
"react-dom": "ReactDOM",
},
exports: 'named'
},
},
},
plugins: [react(), dts({ rollupTypes: true, insertTypesEntry: true })],
resolve: {
alias: aliasWithAbsolutePath,
},
};
export default defineConfig(config);And my `package.json` (dependencies ommited) "name": "@bee-ui/bee-ui",
"version": "1.2.5-beta-2",
"type": "module",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/bee-ui.es.js",
"require": "./dist/bee-ui.cjs.js",
"default": "./dist/bee-ui.es.js"
}
},
"module": "dist/bee-ui.es.js",
"main": "dist/bee-ui.cjs.js",
"types": "dist/index.d.ts",
... |
Beta Was this translation helpful? Give feedback.
-
I saw you posted on Vite too vitejs/vite#16044, but I believe I'm still curious to see what would show up if put |
Beta Was this translation helpful? Give feedback.
I assume
@bee-ui/bee-uiis your private package, but it would be helpful if you can show howimport styled from "styled-components";is transpiled in the file@bee-ui/bee-ui/dist/main.js(It doesn't have to be a whole file, but just a top part of the file and also the lines arounde.h1).Without this, I cannot tell exactly, but it's likely that either
@bee-ui/bee-uiorstyled-componentsmight have some packaging issue.First thing I suggest is to put
@bee-ui/bee-uiintoserver.deps.inline, which usually help to workaround certain packaging issues.