The Tailwind test harness's `render` throws on an element whose child is text
维护者通常 3 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 78/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- react-native, tailwindcss, typescript
调研方向
从src/__tests__/vendor/tailwind/_tailwind.tsx开始,跟踪getClassNames如何遍历component.props.children;复现用例位于src/__tests__/vendor/tailwind/harness-text-child.test.tsx,使用yarn jest src/__tests__/vendor/tailwind/harness-text-child.test.tsx运行。确保在编译元素自身的 className 时,文本子节点的情况能够得到处理,并检查debug: "verbose"是否也会进入详细规则日志。
由索引模型根据 Issue 内容生成。
描述
Before submitting a new issue
- I tested using the latest version of the library, as the bug might be already fixed.
- I tested using a supported version of react native.
- I checked for possible duplicate issues, with possible answers.
Bug summary
render in src/__tests__/vendor/tailwind/_tailwind.tsx collects the class names to compile with getClassNames, which reads component.props.children of every child it walks, so a text child, which has no props, throws before anything compiles.
The text child fails, Rejected to value: [TypeError: Cannot read properties of undefined (reading 'children')]; the false child passes.
In the same helper, registerCSS(output, { debug: Boolean(debug) }) turns debug: "verbose" into true, so the verbose rule log NativewindRenderOptions offers never runs.
Library version
main at 2421ea7 (0.0.0-nightly.2421ea7)
Environment info
System:
OS: Windows 11 10.0.26300
CPU: "(32) x64 AMD Ryzen 9 9950X3D 16-Core Processor "
Memory: 155.26 GB / 255.67 GB
Binaries:
Node:
version: 26.12.1
path: C:\Program Files\nodejs\node.EXE
Yarn:
version: 4.9.2
path: C:\Users\<user>\AppData\Roaming\npm\yarn.CMD
npm:
version: 12.2.1
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels:
- "33"
- "35"
- "35"
- "35"
- "36"
- "37"
Build Tools:
- 35.0.0
- 36.0.0
- 36.1.0
- 37.0.0
System Images:
- android-26 | Google APIs Intel x86_64 Atom
- android-28 | Google APIs Intel x86_64 Atom
- android-29 | Google APIs Intel x86_64 Atom
- android-30 | Google APIs Intel x86_64 Atom
- android-31 | Google APIs Intel x86_64 Atom
- android-32 | Google APIs Intel x86_64 Atom
- android-33 | Google APIs Intel x86_64 Atom
- android-34 | Google APIs Intel x86_64 Atom
- android-35 | Google APIs Intel x86_64 Atom
- android-36.1 | Google Play Intel x86_64 Atom
- android-36.1 | Pre-Release 16 KB Page Size Google Play Intel x86_64 Atom
- android-37.0 | Google APIs Intel x86_64 Atom
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-262.9437.185.2621.16467767
Visual Studio: Not Found
Languages:
Java:
version: 17.0.20.1
path: C:\Program Files\Microsoft\jdk-17.0.20.101-hotspot\bin\javac.EXE
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 19.2.3
wanted: 19.2.3
react-native:
installed: 0.86.3
wanted: 0.86.3
react-native-windows: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Steps to reproduce
- Clone the reproducer branch, which is
mainat 2421ea7 with one file added,src/__tests__/vendor/tailwind/harness-text-child.test.tsx, and install:git clone --branch repro/545-tailwind-test-harness https://github.com/YevheniiKotyrlo/react-native-css cd react-native-css yarn install - Run
yarn jest src/__tests__/vendor/tailwind/harness-text-child.test.tsx.
src/__tests__/vendor/tailwind/harness-text-child.test.tsx:
import { Text } from "react-native-css/components/Text";
import { View } from "react-native-css/components/View";
import { render } from "./_tailwind";
test("render takes an element whose child is text", async () => {
await expect(render(<Text className="text-red-500">hello</Text>)).resolves.toBeDefined();
});
test("render takes an element with a false child", async () => {
await expect(render(<View className="p-1">{false}</View>)).resolves.toBeDefined();
});
Expected: render skips a text child and compiles the element's own className.
Actual: it throws before anything compiles, reading children of the text child.
The run's output on main at 2421ea7, Windows 11, Node 26.12.1
FAIL src/__tests__/vendor/tailwind/harness-text-child.test.tsx
× render takes an element whose child is text (3 ms)
√ render takes an element with a false child (55 ms)
● render takes an element whose child is text
expect(received).resolves.toBeDefined()
Received promise rejected instead of resolved
Rejected to value: [TypeError: Cannot read properties of undefined (reading 'children')]
5 |
6 | test("render takes an element whose child is text", async () => {
> 7 | await expect(render(<Text className="text-red-500">hello</Text>)).resolves.toBeDefined();
| ^
8 | });
9 |
10 | test("render takes an element with a false child", async () => {
at expect (node_modules/expect/build/index.js:113:15)
at Object.expect (src/__tests__/vendor/tailwind/harness-text-child.test.tsx:7:9)
at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17)
at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:9)
at node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:7
at Object.<anonymous> (node_modules/@babel/runtime/helpers/asyncToGenerator.js:14:12)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 passed, 2 total
Snapshots: 0 total
Time: 1.342 s, estimated 2 s
Ran all test suites matching /src\\__tests__\\vendor\\tailwind\\harness-text-child.test.tsx/i.
Reproducible example repository
https://github.com/YevheniiKotyrlo/react-native-css/tree/repro/545-tailwind-test-harness
- 主要语言
- TypeScript
- 星标
- 166
- 派生
- 45
- 平均合并
- 13 天 14 小时
- 30 天内合并 PR
- 1
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
nativewind/react-native-css 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 78/100
nativewind/react-native-css#544 ·
维护者通常 3 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
nativewind/react-native-css#543 ·
维护者通常 3 天内回复
-
难度 2/5 1-3 小时 新手友好度 84/100
nativewind/react-native-css#540 ·
维护者通常 3 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
nativewind/react-native-css#538 ·
维护者通常 3 天内回复
-
难度 2/5 1-3 小时 新手友好度 76/100
nativewind/react-native-css#537 ·
维护者通常 3 天内回复
查看 nativewind/react-native-css 的全部 Issue
相似的 Issue
-
Replace discontinued crypto-js in the theme可能已有人在做 @aelmanaa 今天认领。 未关闭
难度 2/5 1-3 小时 新手友好度 85/100
PaloAltoNetworks/docusaurus-openapi-docs#1689 ·
维护者通常 2 天内回复
-
难度 2/5 1-3 小时 新手友好度 70/100
solana-foundation/solana-web3.js#4015 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 85/100
维护者通常 1 天内回复
-
documentation
难度 1/5 1-3 小时 新手友好度 90/100
ivopogace/opencode-courier#422 ·
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 68/100
chapel-lang/chapel-vscode#158 ·
维护者通常 1 天内回复