解释了创建反应应用程序的基本测试

Question

我对JS还比较陌生，在最新的create-react应用程序中，我不知道下面的模板jest测试的第2行发生了什么：

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

render是否总是返回一个名为getByText的函数？这是在破坏吗？为什么它被用作第三行的方法？

Answer 1

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

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

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

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

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

Jest期望函数的BeInTheDocument方法实际上是由React测试库顶部的另一个库提供的，Jest-dom。

Answer 2

语法称为"destructuring"。它从对象中提取方法/属性。

即

// 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

这是因为找不到文本为：/elearn-reflect/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);
});

Answer 4

您在storeConfig文件中放入了什么？

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