-
0 votesanswersviews
酶不会'render, mount, or shallow'一个组件,因为依赖是未定义的
我想弄清楚为什么我的测试不会运行 . 我有一个React功能组件,它包含一个样式组件,它使用自定义方法生成一个媒体查询,该查询将被导入为css帮助文件 . 我得到了 TypeError: Cannot read property 'medium' of undefined . 这是我的代码 . css / index.js export const media = (function(){ ... -
0 votesanswersviews
styled-components - 测试createGlobalStyle
如何使用样式组件createGlobalStyle进行快照测试? 测试正在使用jest v22.4.4和styled-components v4.1.2,反应v16.7和jest-styled-components v5.0.1以及react-test-renderer v16.6.3 快照的输出没有css . 但我需要一种方法来测试css是否有变化...... 例如 . const BaseCS... -
0 votesanswersviews
如何在更少的情况下导入CSS-in-JS样式
我们有一个包@atlaskit/theme,用js导出样式 . 当在js中导入并在使用styled-components的组件中使用时,此包非常有效 . 现在我们有更少的样式文件,我们想要使用这个包 . 但我看不到有办法这样做 . 欢迎任何建议或想法 . 我试过的东西不起作用: 在构建时使用JS中的样式创建一个较少的文件:这样做不是一个选项,因为很多东西都是从包中导出的,编写逻辑来过滤掉东西在开... -
3 votesanswersviews
使用SVG导入对样式组件进行单元测试
我正在升级React项目的依赖项 . 我将样式组件从 1.4.4 升级到 2.5.0-1 . 我没想到任何重大变化,因为我读到样式组件v2是v1的替代品 . 我没有在Web应用程序中看到任何重大更改,但我的测试用例已被破坏 . 考虑以下,愚蠢和无用的测试 . test('does something', () => { expect(true).toBe(true); }); 正如所... -
0 votesanswersviews
切换到打字稿后,酶快照样式的组件名称丢失
我正在将React应用程序从JavaScript转换为TypeScript . 我们有许多快照测试使用 enzyme-to-json 来序列化酶渲染的组件以及 styled-components-named Babel插件,以确保组件名称出现在快照中 . 例如 . <SecuredText> <p className="c1" > ... -
1 votesanswersviews
在不同环境中生成的带有jest样式组件的快照无序
我正在开发一个项目,使用样式组件和jest与快照测试进行我的React组件的初始渲染 . 我可以在本地运行这些测试,这会按预期生成快照 . 测试文件以及生成的快照都将签入版本控制 . 稍后,当运行CI步骤时,由于具有相同内容的乱序类名称而导致的测试失败 . 快照: exports[`TransparentListItem should render 1`] = ` .c0 { display:... -
6 votesanswersviews
Jest与样式组件themeProvider
我指的是github project,我正在尝试编写一个简单的KeyPad.js组件测试 . 我已经看到在这个问题上打开了问题,一个建议的解决方案是将主题作为prop传递给组件 . 该解决方案不适用于酶 . 在我的情况下,问题是子组件通过ThemeProvider接收主题,并且能够进行测试工作,我需要向所有人添加主题道具 . 例: const tree = renderer.create( ... -
0 votesanswersviews
sinon Spy 测试onClick使用样式组件反应组件
我正在使用 sinon 测试反应组件以确认函数被触发 onClick . 我正在使用 styled-components 所以发现很难将元素作为目标点击 . 我看到以下错误: 方法“模拟”仅用于在单个节点上运行 . 0找到了 . 我的反应代码如下所示: import React, { Component } from 'react' import styled from 'styled-c... -
1 votesanswersviews
样式化的SVG组件
我使用React来帮助管理我的SVG图标: const Trash = ({ fill, width, height, }) => ( <svg width={ `${width}px` } height={ `${height}px` } xmlns="http://www.w3.org/2000/svg" id="Layer_1" d... -
5 votesanswersviews
酶渲染风格的组件与主题
我正在使用 react 与 styled-components 和 jest enzyme 进行测试 . 由于来自 styled-components 的 theme ,我在测试一个因错误而导致错误的主题组件时遇到了麻烦 . 我的组件是: const Wrapper = styled.header` position: fixed; top: 0; left: 0; disp... -
5 votesanswersviews
反应样式组件扩展
我正试图重复使用并扩展 styled-component 而没有运气 . 我怀疑我还没有完全掌握如何正确使用 styled-components 我有一个组件,根据传递给它的 icon prop呈现一个V形图标 . 我想要做的是导出此组件,然后导入它并扩展其样式 . 即 - 在此示例中删除 Header.jsx 中的填充: Chevron.jsx import React from 'react... -
1 votesanswersviews
如何使用样式组件和SASS为下一个组件设置材料样式
我们想在我们的应用程序中使用材料ui下一个组件,我们正在使用带有SASS的样式化组件 . 为了实现这一点,我们使用webpack和raw-loader来导入生成的CSS并应用如下样式: const sidebarStyles = require('./Sidebar.sass'); const StyledDrawer = styled(Drawer)` ${sidebarStyles}... -
11 votesanswersviews
使用带有样式组件的动画(react-native)
我遇到了一个错误说明(通过iOS测试): 无法读取null的属性'getScrollableNode' 尝试使用react-native的Animated沿着styled-components样式工具进行反应和反应原生 . 以下是我创建的 <Logo /> 组件的示例: import React from 'react'; import { Image, Dimensions } ... -
4 votesanswersviews
如何将样式应用于带有样式组件的react-burger-menu按钮?
我想在React应用程序中使用 styled-components 创建一个菜单组件,其中包含同一文件中的样式,从而使其非常模块化 . 我正在使用 react-burger-menu 作为菜单 . 如果我将 BurgerMenu 包装在样式_2696245中,那么一切正常(从 react-burger-menu README.md复制的样式): import React from 'react'... -
1 votesanswersviews
使用React Burger菜单和GatsbyJs
我正在尝试导入组件以将其与GatsbyJs一起使用并使其工作到某一点但除了使用Styled Components之外的其他"effects" . 这是我的代码,说实话,我不知道这是否是React-burge-menu或GatsbyJs的问题 . 首先是组件,我必须将它包装在一个样式的div上才能工作as mention here sidebar.js import React ... -
1 votesanswersviews
JEST STYLED COMPONENTS - toHaveStyleRule没有找到属性
我正在尝试测试我的样式组件 . 因此我安装了 jest-styled-components . 我想测试一下,如果我的组件在点击后改变了不透明度 . 我用 toHaveStyleRule 试了一下 . 但它说: Property not found: "opacity" 所以这是我的风格组件: const ClueAnswer = styled.h3` transiti... -
1 votesanswersviews
TypeError:expect.addSnapshotSerializer不是函数 - 带有样式化组件的Jest
我有一个jest和jest-styled-components的问题 . 我目前正在使用jest 21.2.1和jest-styled-components 4.9.0来运行我的快照测试 . 但是,当我运行所有测试jest时抛出此错误消息 . 有没有人有类似的问题,知道如何解决它?我觉得这是一个依赖问题,我尝试了不同的版本,但没有改变 . 这是 PanelView.test.js 的代码: im... -
3 votesanswersviews
无法让Jest使用包含主题的Styled Components
问题 我一直在使用Jest和Enzyme为我的React组件编写测试,并使用了令人敬畏的Styled Components库 . 但是,由于我已经实现了主题,所以我的所有测试都在破坏 . 让我给你举个例子 . 这是我的 LooksBrowser 组件的代码(我删除了所有的import和prop-types以使其更具可读性): const LooksBrowserWrapper = styled.d... -
3 votesanswersviews
与样式组件父道具反应原生
我正在使用我的react-native项目中的样式组件,我想知道如何从子元素中获取父道具..这是一个例子,我有2个样式组件 const First = styled.View` display: flex; width: 50px; height: 50px; background-color: ${props => props.selected ? 'blue' : 're... -
2 votesanswersviews
使用样式组件进行反应原生导航
我正在使用styled-components处理我的本机项目 . 我们正在使用react-native-navigation在应用程序中执行导航 . 所以问题是如何在这种应用程序中从样式组件实现主题模式?问题是,要根据样式组件执行主题的想法,我必须将我的顶级组件包装在_1514195中,如下所示: <ThemeProvider theme={theme}> <App />...