enzyme 相关问题

ReactJS的单元测试库。它由Airbnb开发。它可以与其他JS测试框架一起使用,如Mocha,Jest,Karma等。

使用jestjs进行单元测试时如何获取组件的props

我用的是浅酶。我想在测试文件中将道具传递给组件。就像示例中一样,但我变得不确定。 console.log(包装器.props()) 它应该重新...

回答 1 投票 0

React.js:如何获取组件期望的所有道具?

我开始对 React.js 应用程序进行单元测试,我面临的挑战之一是确定组件正确安装所需的所有道具。有没有什么实用程序可以检查所有内容...

回答 3 投票 0

TypeError:使用jest、enzyme 和react-16、typescript 时,plugin.test 不是一个函数

我正在将我的 React 应用程序更新到 React-16,但我的所有测试都停止了。我已经升级了酶,jest-enzyme,react-dom,安装了酶适配器,创建了 setupTest.ts 酶文件,

回答 1 投票 0

酶无法与 React 16 一起正常工作(React 创建应用程序)

我正在尝试编写一些基本测试,但是find、closest等遍历功能似乎不起作用 我的设置是react 16(create-react-app)和玩笑 从“反应”导入反应; 导入概览

回答 1 投票 0

反应酶道具未安装在底座上

我正在为 HOC 编写单元测试,该 HOC 呈现图表并对其执行一些操作。该图表是使用从数据库获取并存储在 redux-store 中的数据生成的。为了目的...

回答 1 投票 0

如何使用 Jest 和 Enzyme 为 React 中的 useEffect Hook 编写测试用例?

从 'react' 导入 React, { useEffect, useState }; 从“prop-types”导入 PropTypes; const InputComponent = ({ 项目, 数据 }) => { const [值,setValue] = useState(''); // 绑定值...

回答 1 投票 0

模拟 URLSeachParams

我们用笑话来嘲笑。在我们的应用中用于渲染的酶。 这里我试图模拟 URLSearchParams 的 get 方法。 我尝试使用 jest.spyOn(URLSearchParams, 'get'); 但事实并非如此

回答 4 投票 0

TypeError:无法解构“cacheKeyOptions”的属性“config”,因为它未定义

作为nodejs 18升级的一部分,升级了以下版本。 “反应”:“17.0.2”, “反应-dom”:“17.0.2” “笑话”:“29.7.0”, “开玩笑……

回答 1 投票 0

React 17 出现意外的令牌“导出”

我正在使用 Jest 和 React 为我的项目编写具有以下规格的单元测试用例。当我运行纱线测试(Jest --coverage)时。它给了我以下错误。 错误:测试套件无法运行 开玩笑

回答 1 投票 0

开玩笑:React 17 出现意外的令牌“导出”

我正在使用 Jest 和 React 为我的项目编写具有以下规格的单元测试用例。当我运行纱线测试(Jest --coverage)时。它给了我以下错误。 错误:测试套件无法运行 开玩笑

回答 1 投票 0

Jest 在 React 应用程序中遇到了意外的令牌

我正在尝试运行该应用程序的测试用例。但它显示以下错误。有人可以帮我解决这个问题吗? 附上代码仓库。 https://github.com/Arun12Muralidharan/team_tracker 我不能

回答 1 投票 0

JSLint 抛出错误 - 需要赋值或函数调用,但看到的是表达式

我正在尝试为组件编写测试用例。测试用例正在通过。但 JS lint 困扰着我。它抛出一个错误 - :期望一个赋值或函数调用,而不是看到一个快速...

回答 2 投票 0

Mocha:类型错误:将循环结构转换为 JSON

摩卡突然扔了 类型错误:将循环结构转换为 JSON 我已经完成了执行测试用例的新设置。 直到昨天,测试用例都运行良好。 我正在使用:M...

回答 2 投票 0

React 酶测试 - CustomEvent 未定义

我一直在测试这个组件,但它输出 CustomEvent 未定义:下面是我的代码 发出事件(详细信息){ Utils.setCustomEvent(); const event = new CustomEvent(detail.eventName, { ...

回答 1 投票 0

React 函数组件中的模拟引用

我有一个 React 函数组件,它的子组件之一有一个引用。 ref 是通过 useRef 创建的。 我想用浅渲染器测试组件。我必须以某种方式嘲笑测试的裁判......

回答 5 投票 0

在React + Enzyme中模拟clientHeight和scrollHeight进行测试

我们有一个名为 ScrollContainer 的 React 组件,当其内容滚动到底部时会调用 prop 函数。 基本上: 组件DidMount() { const needToScroll = this.container.

回答 4 投票 0

如何模拟 css 导入以进行笑话/酶测试?

我需要在我的笑话/酶测试中模拟导入的 CSS 文件: 标头.test.js 从“反应”导入反应 从“酶”导入{浅层} 从 './Header' 导入 { Header } jest.mock('语义-ui-css/

回答 2 投票 0

类型错误:(0,_reactTestRenderer.act)不是一个函数

我在测试用例中使用 renderHook 时遇到此错误。不确定是什么问题。 类型错误:(0,_reactTestRenderer.act)不是一个函数 13 | 14 | 14 it('允许上传照片...

回答 2 投票 0

找不到enzyme-adapter-react-16的声明文件?

我使用 Enzyme 来测试 React 应用程序中的组件已经有一段时间了。几周内第一次更新我的软件包后,我开始从测试中收到错误。 失败 src/

回答 6 投票 0

如何在 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

回答 2 投票 0

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.