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

Question

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

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

渲染是否总是返回一个名为 getByText 的 function？ 这是解构吗？ 为什么将它用作第三行的方法？

Answer 1

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

是的，在第 2 行中，解构用于获取函数getByText 。 render函数实际上返回一个包含许多函数的对象，这些函数让您检查 React 渲染的虚拟 DOM 节点。

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

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

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

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

Answer 2

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

IE

 // 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(); });

它在功能上是相同的。

Answer 3

这是因为无法找到带有文本的元素：/learn react/i。 这可能是因为文本被多个元素分解。

所以我这样做了：

 import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import storeConfig from './store/storeConfig'; import App from './App'; const store = storeConfig(); test('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(<Provider store={store}><App /></Provider>, div); });