Question

我编写的组件将带有\ n换行符的文本转换为html段落

Text.js

const Text = props => ((
  <div>
    { props.paragraph.split('\n').map((line, index) => {
      if (line.length === 0) return;
      return <p key={index}>{ line }</p>;
    })}
  </div>
)
);

当我想要与组件进行比较时，如果我在没有toJSON的情况下调用它来呈现组件，则会出现错误。（即使用toMatchSnapshot（）检查结果是相同的）

Text.spec.js

it('ignores \\n at last', () => {
  const paragraphA = 'aa\nbbb\n';
  const paragraphB = 'aa\nbbb';
  const cA = renderer.create(<Text paragraph={paragraphA} />);
  const cB = renderer.create(<Text paragraph={paragraphB} />);
  expect(cA).toEqual(cB); // NG
  expect(cA.toJSON()).toEqual(cB.toJSON()); // OK
});

jest告诉差异如下

比较值序列化到相同的结构。打印内部对象结构而不调用toJSON。

我谷歌但却找不到关于toJSON的任何线索

为什么我们需要toJSON？
toJSON一般做什么？
我在哪里可以找到关于toJSON的参考？

的Env

反应：16.1 jest-cli“：”^ 21.2.1“

提前致谢!!

Answer 1

来自fine manual：

toJSON行为

如果要进行字符串化的对象具有名为toJSON的属性，其值为函数，则toJSON方法会自定义JSON字符串化行为：而不是要序列化的对象，{{返回的值} 1}}调用时的方法将被序列化。

示例：

＆＃13;

toJSON

＆＃13;

//without toJSON
const a = {
  b: 1
};
console.log(
  JSON.stringify(a)
);

＆＃13;

我认为你应该比较 cA.toJSON（）而不是原始函数 cA.toJSON 。

为什么有必要？比较对象（包括数组和函数）时，它们通过引用而不是值进行比较。 React组件具有复杂的结构（例如，引用另一个组件作为属性），因此尝试将其字符串化而不是其.toJSON（）（返回安全对象）会引发错误。例如，如果你有自定义函数来解析不会检查.toJSON方法的JSON，它就不会起作用。

为什么在比较两个组件相等时我们需要jSON？

1 个答案: