docs: add RSD variants

Author: mdjastrzebski

examples/basic/jest.config.js

@@ -1,5 +1,8 @@
 module.exports = {
   preset: 'react-native',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(jest-)?react-native|@react-native(-community)?|react-strict-dom)',
+  ],
   setupFilesAfterEnv: ['./jest-setup.ts'],
 };

examples/basic/package.json

@@ -16,7 +16,8 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.76.5",
-    "react-native-web": "~0.19.13"
+    "react-native-web": "~0.19.13",
+    "react-strict-dom": "^0.0.39"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -26,7 +27,7 @@
     "@types/react": "~18.3.12",
     "eslint": "^8.57.0",
     "jest": "^29.7.0",
-    "react-test-renderer": "18.2.0",
+    "react-test-renderer": "18.3.1",
     "typescript": "^5.3.0"
   },
   "private": true,

examples/basic/tsconfig.json

@@ -2,6 +2,8 @@
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "strict": true,
-    "allowJs": false
+    "allowJs": false,
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext"
   }
 }

examples/basic/tutorial-rsd/1-basics-rsd.test.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { html } from 'react-strict-dom';
+import { render, screen } from '@testing-library/react-native';
+
+function Greeting({ name = 'World' }) {
+  return (
+    <html.div>
+      <html.span>Hello, {name}!</html.span>
+    </html.div>
+  );
+}
+
+describe('Greeting', () => {
+  it('should render', () => {
+    // Arrange
+    render(<Greeting />);
+
+    // Assert
+    expect(screen.getByText('Hello, World!')).toBeOnTheScreen();
+  });
+
+  it('should render with the correct name', () => {
+    // Arrange
+    render(<Greeting name="John" />);
+
+    // Assert
+    expect(screen.getByText('Hello, John!')).toBeOnTheScreen();
+  });
+});

examples/basic/tutorial-rsd/2.1-query-variants-rsd.test.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { html } from 'react-strict-dom';
+import { render, screen } from '@testing-library/react-native';
+
+test('showcase query variants', () => {
+  render(
+    <html.div>
+      <html.span>Item 1</html.span>
+      <html.span>Item 2</html.span>
+    </html.div>,
+  );
+
+  // Use getBy* queries to find a single element matching given predicate
+  expect(screen.getByText('Item 1')).toBeOnTheScreen();
+
+  // Use getAllBy* queries to find all elements matching given predicate (note the use of a regex)
+  expect(screen.getAllByText(/Item/)).toHaveLength(2);
+
+  // Use queryBy* to look for an element that you expect does not exist
+  expect(screen.queryByText('Item 3')).not.toBeOnTheScreen();
+});
+
+function LazyText({ content }: { content: string }) {
+  const [isLoaded, setIsLoaded] = React.useState(false);
+
+  // Simulate async loading operation
+  React.useEffect(() => {
+    sleep(100);
+    setIsLoaded(true);
+  }, []);
+
+  return <html.span>{isLoaded ? content : 'Loading...'}</html.span>;
+}
+
+test('showcase async query variants', async () => {
+  render(
+    <html.div>
+      <LazyText content="Lazy Item 1" />
+      <LazyText content="Lazy Item 2" />
+    </html.div>,
+  );
+
+  // Use findBy* to wait for an element to appear
+  expect(await screen.findByText('Lazy Item 1')).toBeOnTheScreen();
+});
+
+// Simulate async operation
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

examples/basic/tutorial-rsd/2.2-query-predicates-rsd.test.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { html } from 'react-strict-dom';
+import { render, screen } from '@testing-library/react-native';
+
+test('query by semantic role: *ByRole (highly recommended)', () => {
+  render(
+    <html.div>
+      <html.h1>Heading Text</html.h1>
+
+      <html.button>Button 1</html.button>
+
+      <html.p role="alert">Alert Text</html.p>
+
+      <html.div role="menu">
+        <html.span role="menuitem">Menu Item 1</html.span>
+        <html.span role="menuitem">Menu Item 2</html.span>
+      </html.div>
+    </html.div>,
+  );
+
+  expect(screen.getByRole('heading', { name: 'Heading Text' })).toBeOnTheScreen();
+
+  expect(screen.getByRole('button', { name: 'Button 1' })).toBeOnTheScreen();
+  expect(screen.getByRole('alert', { name: 'Alert Text' })).toBeOnTheScreen();
+
+  // TODO: RSD does not set accessible for role elements.
+  // expect(screen.getByRole('menu')).toBeOnTheScreen();
+  // expect(screen.getAllByRole('menuitem')).toHaveLength(2);
+});
+
+test('querying TextInput elements (recommended)', () => {
+  render(
+    <html.div>
+      <html.input placeholder="Enter Text..." aria-label="Text Label" defaultValue="Hello" />
+    </html.div>,
+  );
+
+  // Option 1: Query by a11y label
+  expect(screen.getByLabelText('Text Label')).toHaveDisplayValue('Hello');
+
+  // Option 2: Query by placeholder text
+  expect(screen.getByPlaceholderText('Enter Text...')).toHaveDisplayValue('Hello');
+
+  // Option 3: Query by display value
+  expect(screen.getByDisplayValue('Hello')).toBeOnTheScreen();
+});
+
+test('other accessible queries (ok)', () => {
+  render(
+    <html.div>
+      <html.span>Text content</html.span>
+      <html.div aria-label="ARIA Label" />
+    </html.div>,
+  );
+
+  expect(screen.getByText('Text content')).toBeOnTheScreen();
+  expect(screen.getByLabelText('ARIA Label')).toBeOnTheScreen();
+});
+
+test('escape hatch: *ByTestId (use as a last resort)', () => {
+  render(
+    <html.div>
+      <html.span data-testid="Text 1">Text 1</html.span>
+    </html.div>,
+  );
+
+  expect(screen.getByTestId('Text 1')).toBeOnTheScreen();
+});

examples/basic/tutorial/2-queries/1-query-variants.test.tsx renamed to examples/basic/tutorial/2.1-query-variants.test.tsx

@@ -27,16 +27,14 @@ describe('Counter', () => {
     expect(screen.getByText('1')).toBeOnTheScreen();
   });
 
-  it('should increment the count when the button is pressed', async () => {
-    const user = userEvent.setup();
-
+  it('should increment the count when the button is pressed', () => {
     render(<Counter />);
     expect(screen.getByText('0')).toBeOnTheScreen();
 
     const button = screen.getByRole('button', { name: 'Increment' });
     expect(button).toBeOnTheScreen();
 
-    await user.press(button);
+    fireEvent.press(button);
     expect(screen.getByText('1')).toBeOnTheScreen();
   });
 });