Mobile - Code block - Migrate from React Test Render to React Native …

…Testing Library (#44833)

* Mobile - Code block - Migrate from react-test-render to testing-library/react-native

* Mobile - Code block - Check the block is visible

packages/block-library/src/code/test/__snapshots__/edit.native.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Code renders given text without crashing 1`] = `
+"<!-- wp:code -->
+<pre class=\\"wp-block-code\\"><code>Sample text</code></pre>
+<!-- /wp:code -->"
+`;
+
+exports[`Code renders without crashing 1`] = `
+"<!-- wp:code -->
+<pre class=\\"wp-block-code\\"><code></code></pre>
+<!-- /wp:code -->"
+`;

packages/block-library/src/code/test/edit.native.js

@@ -1,51 +1,65 @@
 /**
  * External dependencies
  */
-import renderer from 'react-test-renderer';
-import { TextInput } from 'react-native';
+import {
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	addBlock,
+	getBlock,
+} from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { BlockEdit } from '@wordpress/block-editor';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { metadata, settings, name } from '../index';
-
-const Code = ( { clientId, ...props } ) => (
-	<BlockEdit name={ name } clientId={ clientId || 0 } { ...props } />
-);
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
 
 describe( 'Code', () => {
 	beforeAll( () => {
-		registerBlockType( name, {
-			...metadata,
-			...settings,
-		} );
+		// Register all core blocks
+		registerCoreBlocks();
 	} );
 
 	afterAll( () => {
-		unregisterBlockType( name );
+		// Clean up registered blocks
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
 	} );
 
-	it( 'renders without crashing', () => {
-		const component = renderer.create(
-			<Code attributes={ { content: '' } } />
-		);
-		const rendered = component.toJSON();
-		expect( rendered ).toBeTruthy();
+	it( 'renders without crashing', async () => {
+		const screen = await initializeEditor();
+
+		// Add block
+		await addBlock( screen, 'Code' );
+
+		// Get block
+		const codeBlock = await getBlock( screen, 'Code' );
+		expect( codeBlock ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'renders given text without crashing', () => {
-		const component = renderer.create(
-			<Code attributes={ { content: 'sample text' } } />
-		);
-		const testInstance = component.root;
-		const textInput = testInstance.findByType( TextInput );
-		expect( textInput ).toBeTruthy();
-		expect( textInput.props.value ).toBe( 'sample text' );
+	it( 'renders given text without crashing', async () => {
+		const initialHtml = `<!-- wp:code -->
+		<pre class="wp-block-code"><code>Sample text</code></pre>
+		<!-- /wp:code -->`;
+
+		const screen = await initializeEditor( {
+			initialHtml,
+		} );
+		const { getByDisplayValue } = screen;
+
+		// Get block
+		const codeBlock = await getBlock( screen, 'Code' );
+		expect( codeBlock ).toBeVisible();
+		fireEvent.press( codeBlock );
+
+		// Get initial text
+		const codeBlockText = getByDisplayValue( 'Sample text' );
+		expect( codeBlockText ).toBeVisible();
+
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 } );