基本的 create-react-app 笑话测试解释答案

【问题标题】：Basic create-react-app jest test explained基本的 create-react-app 笑话测试解释
【发布时间】：2020-06-29 23:16:08
【问题描述】：

我对 JS 比较陌生，无法弄清楚最新 create-react-app 中以下模板 jest 测试的第 2 行发生了什么：

    test('renders learn react link', () => {
      const { getByText } = render(<App />);
      const linkElement = getByText(/learn react/i);
      expect(linkElement).toBeInTheDocument();
    });

渲染是否总是返回一个名为 getByText 的函数？这是解构吗？为什么要在第三行作为方法使用？

【问题讨论】：

标签： jestjs

【解决方案1】：

您询问的代码示例本身不是 Jest 的一部分。 render 函数由 React Testing Library 提供，这是一种用于测试 React 组件的流行工具。

是的，在第 2 行，解构用于获取函数getByText。 render 函数实际上是 returns an object containing a number of functions，它可以让您检查 React 呈现的虚拟 DOM 节点。

getByText 可用于搜索呈现的虚拟 DOM 中具有与给定正则表达式匹配的文本内容的文本节点的所有元素。

在代码示例的第 3 行中，这用于检查文本“learn react”是否包含在由<App /> 组件呈现的虚拟 DOM 中的任何位置。

在第 4 行，Jest 提供的 expect 函数用于断言该文本是否在文档中。

这里Jest的expect函数的toBeInTheDocument方法实际上是由位于React测试库之上的另一个库jest-dom提供的。

【讨论】：

【解决方案2】：

语法称为“解构”。它从对象中提取方法/属性。

即

// some random object
const obj = {
  property1: 'somevalue',
  method1: () => "hello"
}

const {property1, method1 } = obj;
console.log(property1, method1());

当您尝试需要频繁地从对象调用方法或值并且因为不得不使用对象表示法 (obj.method()) 反复调用它而烦恼时，它会很有用。

在您的示例中，您可以将其重写为

test('renders learn react link', () => {
  const element = render( < App / > );
  const linkElement = el.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

而且在功能上是一样的。

【讨论】：