Jest.js 解释了基本的创建-React-应用程序笑话测试

bpsygsoo  于 2022-12-08  发布在  Jest
关注(0)|答案(4)|浏览(204)

我对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的函数?这是解构吗?为什么它被用作第三行的方法?

gajydyqb

gajydyqb1#

您所询问的代码示例并不是Jest本身的一部分。render函数是由React Testing Library提供的,React Testing Library是一个用于测试React组件的流行工具。
是的,在第2行中,使用了反结构化来获取函数getByTextrender函数实际上返回一个对象,该对象包含许多函数,这些函数允许您检查React呈现的虚拟DOM节点。
getByText可用于搜索呈现的虚拟DOM中的所有元素,这些元素具有文本内容与给定正则表达式匹配的文本节点。
在代码示例的第3行中,它用于检查文本“learn react”是否包含在由<App />组件呈现的虚拟DOM中的任何位置。
在第4行中,Jest提供的expect函数用于Assert文档中的文本。
这里Jest的expect函数的toBeInTheDocument方法实际上是由位于React测试库 jest-dom 之上的另一个库提供的。

n8ghc7c1

n8ghc7c12#

语法被称为“解构”。它从对象中取出方法/属性。
也就是说

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

并且在功能上是相同的。

i5desfxk

i5desfxk3#

这是因为找不到具有以下文本的元素:/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);
});
fjaof16o

fjaof16o4#

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

相关问题