styled-jsx icon indicating copy to clipboard operation
styled-jsx copied to clipboard

Bug: Received `true` for a non-boolean attribute `jsx` even with ["styled-jsx/babel-test"]

Open GermanJablo opened this issue 1 year ago • 0 comments

When I run my tests in Vitest using the jsdom environment I receive the error:

Warning: Received true for a non-boolean attribute jsx.

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

GermanJablo avatar Oct 07 '23 23:10 GermanJablo