diff --git a/packages/rax-compat/tests/children.test.tsx b/packages/rax-compat/tests/children.test.tsx
new file mode 100644
index 000000000..c9aebdef4
--- /dev/null
+++ b/packages/rax-compat/tests/children.test.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+import { expect, it, describe } from 'vitest';
+import { Component } from '../src/index';
+import { render } from '@testing-library/react';
+
+const arrText = ['hello', 'rax'];
+
+describe('children', () => {
+ it('should work with map', () => {
+ function Hello({ children }) {
+ return
+ {
+ React.Children.map(children, (child, i) => {
+ if (i === 0) {
+ return {arrText[1]}
+ }
+ return child;
+ })
+ }
+
+ }
+
+ const instance = (
+
+ {arrText[0]}
+ {arrText[1]}
+
+ );
+
+ const wrapper = render(instance);
+ const node = wrapper.queryByTestId('test');
+
+ expect(node.children.item(0).textContent).toBe(node.children.item(0).textContent);
+ expect(node.children.item(1).textContent).toBe(arrText[1]);
+ })
+
+ it('should work with forEach', () => {
+ function Hello({ children }) {
+ React.Children.forEach(children, (child, i) => {
+ expect(child.type).toBe('span');
+ expect(child.props.children).toBe(arrText[i]);
+ });
+ return children
+ }
+
+ const instance = (
+
+ {arrText[0]}
+ {arrText[1]}
+
+ );
+
+ render(instance);
+ })
+
+ it('should escape keys', () => {
+ const zero = ;
+ const one = ;
+ const instance = (
+
+ {zero}
+ {one}
+
+ );
+ const mappedChildren = React.Children.map(
+ instance.props.children,
+ kid => kid,
+ );
+ expect(mappedChildren).toEqual([
+ ,
+ ,
+ ]);
+ });
+
+ it('should combine keys when map returns an array', () => {
+ const instance = (
+
+ );
+ const mappedChildren = React.Children.map(
+ instance.props.children,
+ // Try a few things: keyed, unkeyed, hole, and a cloned element.
+ kid => [
+ ,
+ null,
+ ,
+ kid,
+ kid && React.cloneElement(kid, {key: 'z'}),
+
,
+ ],
+ );
+ expect(mappedChildren.length).toBe(18);
+
+ //
+ expect(mappedChildren[0].type).toBe('span');
+ expect(mappedChildren[0].key).toBe('.$a/.$x');
+ expect(mappedChildren[1].type).toBe('span');
+ expect(mappedChildren[1].key).toBe('.$a/.$y');
+ expect(mappedChildren[2].type).toBe('div');
+ expect(mappedChildren[2].key).toBe('.$a/.$a');
+ expect(mappedChildren[3].type).toBe('div');
+ expect(mappedChildren[3].key).toBe('.$a/.$z');
+ expect(mappedChildren[4].type).toBe('hr');
+ expect(mappedChildren[4].key).toBe('.$a/.5');
+
+ // false
+ expect(mappedChildren[5].type).toBe('span');
+ expect(mappedChildren[5].key).toBe('.1/.$x');
+ expect(mappedChildren[6].type).toBe('span');
+ expect(mappedChildren[6].key).toBe('.1/.$y');
+ expect(mappedChildren[7].type).toBe('hr');
+ expect(mappedChildren[7].key).toBe('.1/.5');
+
+ //
+ expect(mappedChildren[8].type).toBe('span');
+ expect(mappedChildren[8].key).toBe('.$b/.$x');
+ expect(mappedChildren[9].type).toBe('span');
+ expect(mappedChildren[9].key).toBe('.$b/.$y');
+ expect(mappedChildren[10].type).toBe('div');
+ expect(mappedChildren[10].key).toBe('.$b/.$b');
+ expect(mappedChildren[11].type).toBe('div');
+ expect(mappedChildren[11].key).toBe('.$b/.$z');
+ expect(mappedChildren[12].type).toBe('hr');
+ expect(mappedChildren[12].key).toBe('.$b/.5');
+
+ //
+ expect(mappedChildren[13].type).toBe('span');
+ expect(mappedChildren[13].key).toBe('.3/.$x');
+ expect(mappedChildren[14].type).toBe('span');
+ expect(mappedChildren[14].key).toBe('.3/.$y');
+ expect(mappedChildren[15].type).toBe('p');
+ expect(mappedChildren[15].key).toBe('.3/.3');
+ expect(mappedChildren[16].type).toBe('p');
+ expect(mappedChildren[16].key).toBe('.3/.$z');
+ expect(mappedChildren[17].type).toBe('hr');
+ expect(mappedChildren[17].key).toBe('.3/.5');
+ });
+});