javascript - 使用 Jest 进行快照测试时是否使用 toJSON

Question

我是 React 新手，我正在测试我的组件。在实现快照测试时，我发现了这两种方法:

方法 1

import React from 'react'
import renderer from 'react-test-renderer'
import Projects from './Projects'

it('renders Projects component properly', () => {
  const tree = renderer.create(<Projects />)
  expect(tree).toMatchSnapshot()
})

方法 2

import React from 'react'
import renderer from 'react-test-renderer'
import Projects from './Projects'

it('renders Projects component properly', () => {
  const component = renderer.create(<Projects />)
  const tree = component.toJSON()
  expect(tree).toMatchSnapshot()
})

在组件中调用 toJSON 是否重要(方法 2)，或者您可以直接传递它来检查 toMatchSnapshot(方法 1)吗？有人可以向我解释一下这两种方法在性能方面的区别吗？

Answer 1

TL;DR

当使用toMatchSnapshot匹配器时，在传递给expect的对象上调用toJSON。它是某种检查链的一部分，对于绝大多数实际情况来说，对性能的影响可能可以忽略不计。我建议调用 toJSON 只是为了遵循“显式优于隐式”原则以及内部行为可能会发生变化的事实。

说明

matcher uses快照状态 match method那serializes目的。 serialize只需使用一组插件调用 Pretty-format 即可。

这是 pretty-format 的入口点，我在那里添加了评论:

function prettyFormat(
  val: unknown,
  options?: PrettyFormat.OptionsReceived,
): string {
  if (options) {
    validateOptions(options);
    if (options.plugins) {
      const plugin = findPlugin(options.plugins, val);
      /* When val is a result of `toJSON` call 
         it has a $$typeof: Symbol.for('react.test.json') field so  
         it is handled by ReactTestComponent plugin in this point */
      if (plugin !== null) {
        return printPlugin(plugin, val, getConfig(options), '', 0, []);
      }
    }
  }

  // When `toJSON` is not called `printBasicValue` is invoked but is it pointless
  const basicResult = printBasicValue(
    val,
    getPrintFunctionName(options),
    getEscapeRegex(options),
    getEscapeString(options),
  );
  if (basicResult !== null) {
    return basicResult;
  }

  return printComplexValue(val, getConfig(options), '', 0, []);
}

printBasicValue只是执行一组检查，所有这些检查都对某个对象失败，因此 printComplexValue轮到了。 这是调用 .toJSON() 的片段。

  if (
    config.callToJSON &&
    !hitMaxDepth &&
    val.toJSON &&
    typeof val.toJSON === 'function' &&
    !hasCalledToJSON
  ) {
    return printer(val.toJSON(), config, indentation, depth, refs, true);
  }

printer 找到一个插件并在一开始就调用它，所以这并不重要。

  const plugin = findPlugin(config.plugins, val);
  if (plugin !== null) {
    return printPlugin(plugin, val, config, indentation, depth, refs);
  }

您可以注意到，可以通过设置配置选项或其他一些条件来禁用调用 toJSON ，我认为这些条件对于快照的情况并不重要，但仍然如此。