styled-jsx
styled-jsx copied to clipboard
Bug: Received `true` for a non-boolean attribute `jsx` even with ["styled-jsx/babel-test"]
When I run my tests in Vitest using the jsdom environment I receive the error:
Warning: Received
true
for a non-boolean attributejsx
.
According to the readme, this error is fixed with styled-jsx/babel-test
, but it is not working for me.
vitest.config.ts
import { defineConfig } from "vite";
import { loadEnvConfig } from "@next/env";
loadEnvConfig(process.cwd());
export default defineConfig({
test: {
environment: "jsdom",
},
});
Sample.test.tsx
import { createRoot } from "react-dom/client";
import * as ReactTestUtils from "react-dom/test-utils";
import { expect, test } from "vitest";
function Hello() {
return (
<div>
Hello
<style jsx global>
{`
div {
color: red;
}
`}
</style>
</div>
);
}
const root = document.createElement("div");
document.body.appendChild(root);
ReactTestUtils.act(() => {
createRoot(root).render(
<Hello />
);
});
test("Hello", () => {
expect(root.innerHTML).toBe("<div>Hello</div>");
});
.babelrc
{
"presets": ["next/babel", "@babel/preset-typescript"],
"env": {
"test": {
"plugins": ["styled-jsx/babel-test"]
}
}
}
Environment
- Next: 13.4.19
- OS: Windows 11