ReactJS的单元测试库。它由Airbnb开发。它可以与其他JS测试框架一起使用,如Mocha,Jest,Karma等。
我正在为 HOC 编写单元测试,该 HOC 呈现图表并对其执行一些操作。该图表是使用从数据库获取并存储在 redux-store 中的数据生成的。为了目的...
如何使用 Jest 和 Enzyme 为 React 中的 useEffect Hook 编写测试用例?
从 'react' 导入 React, { useEffect, useState }; 从“prop-types”导入 PropTypes; const InputComponent = ({ 项目, 数据 }) => { const [值,setValue] = useState(''); // 绑定值...
我们用笑话来嘲笑。在我们的应用中用于渲染的酶。 这里我试图模拟 URLSearchParams 的 get 方法。 我尝试使用 jest.spyOn(URLSearchParams, 'get'); 但事实并非如此
TypeError:无法解构“cacheKeyOptions”的属性“config”,因为它未定义
作为nodejs 18升级的一部分,升级了以下版本。 “反应”:“17.0.2”, “反应-dom”:“17.0.2” “笑话”:“29.7.0”, “开玩笑……
我正在使用 Jest 和 React 为我的项目编写具有以下规格的单元测试用例。当我运行纱线测试(Jest --coverage)时。它给了我以下错误。 错误:测试套件无法运行 开玩笑
我正在使用 Jest 和 React 为我的项目编写具有以下规格的单元测试用例。当我运行纱线测试(Jest --coverage)时。它给了我以下错误。 错误:测试套件无法运行 开玩笑
我正在尝试运行该应用程序的测试用例。但它显示以下错误。有人可以帮我解决这个问题吗? 附上代码仓库。 https://github.com/Arun12Muralidharan/team_tracker 我不能
JSLint 抛出错误 - 需要赋值或函数调用,但看到的是表达式
我正在尝试为组件编写测试用例。测试用例正在通过。但 JS lint 困扰着我。它抛出一个错误 - :期望一个赋值或函数调用,而不是看到一个快速...
摩卡突然扔了 类型错误:将循环结构转换为 JSON 我已经完成了执行测试用例的新设置。 直到昨天,测试用例都运行良好。 我正在使用:M...
我一直在测试这个组件,但它输出 CustomEvent 未定义:下面是我的代码 发出事件(详细信息){ Utils.setCustomEvent(); const event = new CustomEvent(detail.eventName, { ...
我有一个 React 函数组件,它的子组件之一有一个引用。 ref 是通过 useRef 创建的。 我想用浅渲染器测试组件。我必须以某种方式嘲笑测试的裁判......
在React + Enzyme中模拟clientHeight和scrollHeight进行测试
我们有一个名为 ScrollContainer 的 React 组件,当其内容滚动到底部时会调用 prop 函数。 基本上: 组件DidMount() { const needToScroll = this.container.
我需要在我的笑话/酶测试中模拟导入的 CSS 文件: 标头.test.js 从“反应”导入反应 从“酶”导入{浅层} 从 './Header' 导入 { Header } jest.mock('语义-ui-css/
类型错误:(0,_reactTestRenderer.act)不是一个函数
我在测试用例中使用 renderHook 时遇到此错误。不确定是什么问题。 类型错误:(0,_reactTestRenderer.act)不是一个函数 13 | 14 | 14 it('允许上传照片...
找不到enzyme-adapter-react-16的声明文件?
我使用 Enzyme 来测试 React 应用程序中的组件已经有一段时间了。几周内第一次更新我的软件包后,我开始从测试中收到错误。 失败 src/
如何在 React 中使用 Jest 和 Enzyme 测试组件中的 prop 是否正确渲染
我有一个名为 Product 的 React 组件,如下所示: {props.headerText} 我有一个名为 Product 的 React 组件,如下所示: <div> <Wrapper> <Heading>{props.headerText}</Heading> <Service>({props.items.length})</Service> </Wrapper> {props.items !== undefined && props.items.length > 0 ? ( <TableWrapper> {props.items && props.items.length > 0 && ( <DataTable paginationSize={props.paginationSize}> <DataTable.Heading accessor="name"> Name </DataTable.Heading> <DataTable.Heading accessor="id"> Service ID </DataTable.Heading> <DataTable.Heading accessor="type"> Access </DataTable.Heading> <DataTable.Heading accessor="band"> Band </DataTable.Heading> <DataTable.Heading accessor="noUsers"> Users </DataTable.Heading> {props.tableItems.map((p, i) => { return <DataTable.Row key={i} data={p} />; })} </DataTable> )} </TableWrapper> ) : ( <NoMessage>{props.noItemMessage}</NoMessage> )} </div> 其中 Wrapper、Heading、Service、TableWrapper 是样式组件。我正在尝试 使用 Jest 和 Enzyme 测试此组件,以检查 headerText 道具是否正确呈现 。下面给出的代码是我尝试编写测试用例的方式: test("header text is being passed through correctly", () => { const wrapper = mount( <Product items={data} headerText="Service" paginationSize="5" noItemMessage="No results found" /> ); expect(wrapper.find(HeaderText).text()).toEqual("Service"); 但我收到此错误: TypeError: Cannot read property 'blue' of undefined at Object.<anonymous>.exports.RightArrow.Icons.RightArrow.extend.props (src/lib/DataTable.js:149:129) DataTable.js 中的第 149 行是: color: ${props => props.theme.secondary.blue}; 我无法弄清楚为什么会出现此错误。有人可以指导我解决这个问题吗?我只是想检查 headerText 是否从 props 中正确渲染。 在包装器中添加主题作为道具 <Product items={data} theme={{secondary: {blue: ''}}} headerText="Service" paginationSize="5"noItemMessage="No results found" /> 或者嘲笑它 import { createSpy } from 'expect'; const theme = createSpy(); <Product items={data} theme={theme} headerText="Service" paginationSize="5" noItemMessage="No results found" /> 我们可以使用 styled-componnets 的 themeProvider 来创建一个围绕 shallow 或 mount 酶方法的包装器,如下所示: import { ThemeProvider } from 'styled-components'; const mountWithTheme = (children, theme={}, options = {}) => { const wrapper = mount(<ThemeProvider theme={theme}>{children}</ThemeProvider>, options); return wrapper.mount({}); }; test("header text is being passed through correctly", () => { const wrapper = mountWithTheme(<Product items={data} headerText="Service" paginationSize="5" noItemMessage="No results found" />, { secondary: { blue: 'blue' } }); // we passed the theme we want as an argument to the mountWithTheme method expect(wrapper.find(HeaderText).text()).toEqual("Service"); }); 最好将 utils mountWithTheme 和 ShallowWithTheme 提取到不同的文件中,以便可以重用它,并且作为建议,您可以创建一个模拟主题文件,其中包含一些可以传递给这些包装器的默认主题,而不是每次我们使用这些实用程序时手动传递主题。 更多信息,请访问以下链接: https://github.com/styled-components/styled-components/issues/1319
语法错误:无法在模块外部使用 import 语句 React JS Antd
为了优化捆绑包大小,我不是从 lib 文件夹获取组件,而是从 es 文件夹导入它。 例子: 从 'antd/es/modal' 导入模态; 因此,在编写测试用例时,它给出...
我们正在将应用程序升级到 React 18,并且需要将我们的 tet 从 Enzyme 迁移到 RTL。我正在努力寻找一个好的解决方案来重写我的测试: 函数 useButtonTests( // eslint-
使用 Jest 和 Enzyme 在 React 中进行测试。 对于反应组件内的一个函数,我使用 setTimeOut 来更改状态。 现在为了在 jest 中测试该函数,我使用 jest.useFakeTimer。 使用...
我正在尝试测试反应组件中的各个行和单元格,该组件的“返回”如下所示: 返回 ( ... 我正在尝试测试反应组件中的各个行和单元格,该组件的“返回”如下所示: return ( <div className="app-body"> <table className="grid"> <tbody> {grid.map((row, rowIdx) => { return <tr className="grid-row" key={rowIdx}> {row.map((node, nodeIdx) => { const { row, col } = node; return <Node key={nodeIdx} row={row} col={col}></Node> })} </tr> })} </tbody> </table> </div> ); 如何测试笑话/酶中的每个细胞? 我一直在努力: describe('test MyComponent', () => { const wrapper = render(<MyComponent />); const table = wrapper.find('table'); const row = render(<tr />) const node = render(<Node />); it('table grid', () => { expect(table).toHaveLength(1); expect(row).toHaveLength(1); expect(node).toHaveLength(1); }); }); 为什么它只期望一个节点? 如何收集表中的所有节点? 它期望为 1,因为只有 1 个 table 元素可供查找(对于 expect(table))。对于另外两个(row和node),您只是渲染单个元素(完全独立于您的MyComponent。如果您尝试计算MyComponent中的表、行和节点的数量,请尝试像这样的: describe('test MyComponent', () => { const wrapper = mount(<MyComponent />); const table = wrapper.find('table'); const row = table.find('tr') const node = table.find(Node) it('table grid', () => { expect(table).toHaveLength(1); expect(row).toHaveLength(whateverYouExpect); expect(node).toHaveLength(whateverYouExpect); }); });