小编Rom*_*her的帖子

许多React 测试库示例展示了如何使用getByText查询查找和单击按钮，如下所示：

fireEvent.click(getByText("Create"))

或者

userEvent.click(getByText("Create"))

但是，按钮没有文本而只有 SVG 图标是很常见的，例如 Material UI 的图标按钮或浮动操作按钮。有没有推荐的方法来查询和单击这些按钮？对于上下文，我使用的是配套用户事件库提供的更高级别的事件。

当我尝试创建包含Semantic-UI- React'Modal'组件的React组件"LoadingModal"的Jest快照时,快照最终为空,在.snap文件中为'null'.我已经测试了其他Semantic-UI-React组件的快照,例如'Button','Dropdown'和'Sidebar',它们使用正确的html输出渲染和快照就好了.

这看起来不像Jest快照本身的问题,而是反应测试渲染器与其返回null的.create()和.toJson()方法.

为什么react-test-renderer会正确渲染一些Semantic-UI-React组件,而不是其他像'Modal'？react-test-render似乎是为快照序列化React组件的标准方法,也是Jest快照文档中使用的方法.

我使用的是react@16.2.0,jest @ 22.1.4,react-test-renderer @ 16.2.0和semantic-ui-react@0.77.1

更新:

看起来由于某种原因,Semantic-UI-React Modal组件特别设置为在浏览器中不呈现时呈现null.

有关更多信息,请参阅github repo上的问题.

LoadingModal.test.js

import React from 'react'
import renderer from 'react-test-renderer'
import LoadingModal from './LoadingModal'

test('should render correctly', () => {
    const tree = renderer.create(
        <LoadingModal/>
    ).toJSON()
    expect(tree).toMatchSnapshot()
})

LoadingModal.test.js.snap

// Jest Snapshot v1

exports[`should render correctly 1`] = `null`;

LoadingModal.js

import React from 'react';
import PropTypes from 'prop-types'

import { Modal, Dimmer, Loader} from 'semantic-ui-react'

class LoadingModal extends React.Component { …