我对JS比较陌生,不能弄清楚在最新的create-react-app中下面的模板jest测试的第2行是怎么回事:
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
render是否总是返回一个名为getByText的函数?这是解构吗?为什么它被用作第三行的方法?
4条答案
按热度按时间gajydyqb1#
您所询问的代码示例并不是Jest本身的一部分。
render
函数是由React Testing Library提供的,React Testing Library是一个用于测试React组件的流行工具。是的,在第2行中,使用了反结构化来获取函数
getByText
。render
函数实际上返回一个对象,该对象包含许多函数,这些函数允许您检查React呈现的虚拟DOM节点。getByText可用于搜索呈现的虚拟DOM中的所有元素,这些元素具有文本内容与给定正则表达式匹配的文本节点。
在代码示例的第3行中,它用于检查文本“learn react”是否包含在由
<App />
组件呈现的虚拟DOM中的任何位置。在第4行中,Jest提供的expect函数用于Assert文档中的文本。
这里Jest的expect函数的toBeInTheDocument方法实际上是由位于React测试库 jest-dom 之上的另一个库提供的。
n8ghc7c12#
语法被称为“解构”。它从对象中取出方法/属性。
也就是说
当你需要频繁地从一个对象调用一个方法或值,并且因为不得不用对象符号(
obj.method()
)反复调用它而感到烦恼时,它会很有用。在您的示例中,可以将其重写为
并且在功能上是相同的。
i5desfxk3#
这是因为找不到具有以下文本的元素:/learn react/i。这可能是因为文本被多个元素分解。
所以我是这样做的:
fjaof16o4#
您在storeConfig文件中输入了什么?