update

궁금해서 더 찾아보다가 이 질답을 발견했는데 JSDOM의 css파서의 문제다 해결책은 JSDOM을 새로 설정해주는것이다라는 해결책을 말하지만.
결론적으로는 jest에서 스타일을 테스트할 이유가 없다. 라는 이야기를 한다. 스타일을 테스트 하는것은 단위테스트가 아니라
E2E 테스트에서 진행하는것인가? TDD를 이제 막 배우고 있는 중이라 배운도구로 모두 해결하려다 보니 이런 상황이 벌어진것인가 싶다.
하지만! jest환경에서 style을 꼭 체크 해봐야 하는경우도 있을수 있으니 그 상황에서 도움이 될것같다!

배경

나는 tailwind를 사용할때 react-testing-library를 위해 css파일을 먼저 빌드하는 하는 방법을 사용하고있다.
해당 방법에 대한 stackoverflow

그리고 아래와 같은 UI를 만들기 위해 css의 ::before기능을 사용하기로 했다. tailwind에서의 before사용법은 여기서 확인할 수 있다.

작성된 코드

        <label htmlFor="username" className="before:content-['*'] before:ml-0.5 before:text-red-500">
          사용자명:
        </label>

문제발생

UI는 문제없이 잘표시됐다. 하지만 문제는 테스트를 진행하려고 할때 문제가 발생했다.
아래와 같은 에러코드가 발생한다.

console.error
      Error: Could not parse CSS stylesheet
          at exports.createStylesheet (/Users/soorokim/work/test-project/node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:34:21)
          at HTMLStyleElementImpl._updateAStyleBlock (/Users/soorokim/work/test-project/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
          at HTMLStyleElementImpl._attach (/Users/soorokim/work/test-project/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:19:12)
          at HTMLHeadElementImpl._insert (/Users/soorokim/work/test-project/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:835:14)
          at HTMLHeadElementImpl._preInsert (/Users/soorokim/work/test-project/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:756:10)
          at HTMLHeadElementImpl._append (/Users/soorokim/work/test-project/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:862:17)
          at HTMLHeadElementImpl.appendChild (/Users/soorokim/work/test-project/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:598:17)
          at HTMLHeadElement.appendChild (/Users/soorokim/work/test-project/node_modules/jsdom/lib/jsdom/living/generated/Node.js:411:60)
          at appendChild (/Users/soorokim/work/test-project/test-utils.tsx:17:17)
          at Object.<anonymous> (/Users/soorokim/work/test-project/__tests__/components/RequestListTable.test.tsx:59:9)
          at Promise.then.completed (/Users/soorokim/work/test-project/node_modules/jest-circus/build/utils.js:300:28)
          at new Promise (<anonymous>)
          at callAsyncCircusFn (/Users/soorokim/work/test-project/node_modules/jest-circus/build/utils.js:233:10)
          at _callCircusTest (/Users/soorokim/work/test-project/node_modules/jest-circus/build/run.js:315:40)
          at processTicksAndRejections (node:internal/process/task_queues:96:5)
          at _runTest (/Users/soorokim/work/test-project/node_modules/jest-circus/build/run.js:251:3)
          at _runTestsForDescribeBlock (/Users/soorokim/work/test-project/node_modules/jest-circus/build/run.js:125:9)
          at run (/Users/soorokim/work/test-project/node_modules/jest-circus/build/run.js:70:3)
          at runAndTransformResultsToJestFormat (/Users/soorokim/work/test-project/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
          at jestAdapter (/Users/soorokim/work/test-project/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
          at runTestInternal (/Users/soorokim/work/test-project/node_modules/jest-runner/build/runTest.js:367:16)
          at runTest (/Users/soorokim/work/test-project/node_modules/jest-runner/build/runTest.js:444:34)
          at Object.worker (/Users/soorokim/work/test-project/node_modules/jest-runner/build/testWorker.js:106:12) {
        detail: '/*\n' +
          '! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com\n' +
          '*/\n' +
          '\n' +
          '/*\n' +
          '1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n' +
          '2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n' +

에러 발생지점

      15 |
      16 |   style.innerHTML = text;
    > 17 |   document.head.appendChild(style);
         |                 ^
      18 |
      19 |   return view;
      20 | };

원인분석

tailwind를 같은 방법으로 사용한 다른 프로젝트와 비교해보며 라이브러리의 버전을 맞춰보기도 하고
tailwind나 jest, react-testing-library의 이슈탭을 열심히 찾아보았지만 답이 없었다.
그래서 마지막으로 잘되는 프로젝트의 index.css를 안되는 프로젝트로 가져와 테스트를 진행하니 에러가 발생하지 않았다.

에러 발생지점을 잘 보면 testing-library에서 생성된 스타일을 document.head에 넣을때 문제가 되는것이라는것을 알 수 있었고
파일에 뭔가 문제가 있는건가 싶었다.(stackoveflow 링크참조)

그래서 테스트를 포기할까 하다가 마지막으로 만들어진 css를 보기로 했다.

// __tests__/index.css
.before\:ml-0::before {
  content: var(--tw-content);
  margin-left: 0px;
}

.before\:ml-0\.5::before {
  content: var(--tw-content);
  margin-left: 0.125rem;
}

.before\:text-red-500::before {
  content: var(--tw-content);
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.before\:content-\[\'\*\'\]::before {
  --tw-content: '*';
  content: var(--tw-content);
}

(코드블럭으로 올려보니 문제가 있는 css에 syntax highlighting이 안되는 것이 보인다.)
테스트가 잘진행되는 css파일과 비교했을때 css파일 맨 마지막에 보니 before에 관련된 style들이 있었고
혹시나 싶어 가장 복잡해보이는 마지막 구문을 빼고 테스트를 진행해보니 에러없이 진행이됐다.(???!!!)

해결방법

문제되는 것만 대안을 마련하면 문제를 해결할수 있지 않을까 했고 그것이 통했다.
내가 해결한 방법은 1차원적으로 문제가 되는 구문이 만들어지지 않게 하기 위함으로 상황에 맞게 응용하면 된다.
일단 global.css(나는 Next.js13 app route를 사용하고있기 때문에 tailwind가 여기서 import된다.)에 before관련 구문을 추가했다.
(나는 최대한 작은 수정으로 해결하고싶었기 때문에 before관련된 모든 것을 수정하기 보단 그냥 tailwind에 끼워 맞춰질수있는 구문을 넣었다.)

// app/golbal.css
.before-star::before {
  --tw-content: '*';
}

그리고 나서 코드의 class를 아래와 같이 변경해주었다.

        <label htmlFor="username" className="before-star before:ml-0.5 before:text-red-500">
          사용자명:
        </label>

이렇게 하니 테스트를 위해 생성한 index.css 가 아래와같이 출력됐고 테스트는 문제없이 진행됐다.

// __tests__/index.css
.before-star::before { // 수정된부분
  --tw-content: '*';
}

.before\:ml-0::before {
  content: var(--tw-content);
  margin-left: 0px;
}

.before\:ml-0\.5::before {
  content: var(--tw-content);
  margin-left: 0.125rem;
}

.before\:text-red-500::before {
  content: var(--tw-content);
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}