ReactJS - testRenderer.toJSON() 方法

对于 React 组件，TestRenderer 包非常有用。它可以在不使用网页或移动设备设置的情况下显示组件在 JavaScript 中的呈现方式。

例如，拍摄 React 组件的外观，就像树状结构一样。这可以在不使用 Web 浏览器或 jsdom 的情况下完成。它对于测试项目的视觉效果很有用，而无需使用实际的 Web 环境。

testRenderer.toJSON() 是 React 测试库中的一个方法，它返回一个对象。此树仅包含特定于平台的节点及其属性，例如 <div> 或 <View>。它没有用户编写的组件。此方法主要用于快照测试，其中捕获渲染组件的“快照”并将其与先前存储的快照进行比较，以确保我们的 UI 不会意外更改。

语法

testRenderer.toJSON()

参数

该方法不接受任何参数。我们直接在 TestRenderer 实例上使用它。

返回值

该方法返回一个表示渲染树的对象。此树包含特定于平台的节点，如 <div> 和 <View>，以及相关属性。但是，它不包含任何用户编写的组件。

这是一个简单的用法示例

import React from 'react';
import TestRenderer from 'react-test-renderer';

const MyComponent = () => <div>Hello, World!</div>;
const testRenderer = TestRenderer.create(<MyComponent />);
const tree = testRenderer.toJSON();
console.log(tree);

在此示例中，树将是一个表示 MyComponent 渲染结构的对象。

示例

示例 - 显示简单消息

此应用程序是一个简单的 React 组件，它在 <div> 内渲染一条简单消息。消息是“Hello, Simple React App 1!”。这是一个简单的示例，用于演示 testRenderer.toJSON() 的基本用法。当我们运行此应用程序时，它将记录一个显示渲染树的对象，其中包含一个带有消息的 <div> 节点。因此，此应用程序的代码如下所示：

import React from 'react';
import TestRenderer from 'react-test-renderer';

const App = () => {
   return <div>Hello, Simple React App 1!</div>;
};

export default App;
const testRenderer = TestRenderer.create(<App />);
const tree = testRenderer.toJSON();
console.log(tree);

输出

示例 - 创建列表应用程序

在此应用程序中，我们将创建一个 React 组件，该组件创建一个列表 (<ul>)，其中包含三个项目 (<li>)。这些项目是“Item 1”、“Item 2”和“Item 3”。列表是使用 map 函数动态生成的。当我们运行此应用程序时，它将记录一个表示渲染树的对象，捕获列表及其项目的结构。

import React from 'react';
import TestRenderer from 'react-test-renderer';

const App = () => {
   const items = ['Item 1', 'Item 2', 'Item 3'];   
   return (
      <ul>
         {items.map((item, index) => (
            <li key={index}>{item}</li>
         ))}
      </ul>
   );
};

export default App;

const testRenderer = TestRenderer.create(<App />);
const tree = testRenderer.toJSON();

console.log(tree);

输出

示例 - 交互式按钮应用程序

此应用程序创建一个具有状态变量 (count) 和按钮的 React 组件。状态最初设置为 0，并在一个段落 (<p>) 元素中显示。单击按钮会递增计数。此示例显示了一个使用状态管理的更交互式的组件。当我们运行此应用程序时，它将记录一个表示渲染树的对象，包括段落和按钮元素的结构。

import React, { useState } from 'react';
import TestRenderer from 'react-test-renderer';
import './App.css';

const App = () => {
   const [count, setCount] = useState(0);   
   return (
      <div className='App'>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
   );
};

export default App;

const testRenderer = TestRenderer.create(<App />);
const tree = testRenderer.toJSON();
console.log(tree);

输出

总结

testRenderer.toJSON() 是 React 测试库中的一个方法，它提供渲染组件树的表示形式。因此，我们已经看到了它的工作原理以及使用它的三个不同的应用程序。这三个应用程序提供了关于如何在不同情况下使用 testRenderer.toJSON() 的简单示例，从基本渲染到更交互式的组件。控制台对象表示渲染组件的结构，这对于测试和故障排除很有用。