Question

当我导入组件（react-slider）并通过样式化组件设置样式时，Jest崩溃。

此代码如下：

我的Component.styles.js文件：

import styled, { css } from 'styled-components'
import ReactSlider from 'react-slider'

const StyledReactSlider = styled(ReactSlider)`
...CSS here
`

我的组件如下：

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

import * as Styled from './Component.styles'

...Lots of code

<Styled.StyledReactSlider
barClassName={'slider-bar'}
handleClassName={'slider-handle'}
withBars
max={max}
value={value}
onChange={onChange}
/>

...Lots more code

最后，我非常简单的测试文件：

import React from 'react'
import { mount } from 'enzyme'

import 'jest-styled-components'

import MyComponent from './MyComponent'

describe('Component Tests ', () => {
  it(`should render the <MyComponent /> default correctly`, () => {
    const component = mount(<MyComponent />)
    expect(component).toMatchSnapshot()
    component.unmount()
  })
})

由此产生的结果是一个很大的错误，看起来像节点内存不足（JavaScript堆内存不足消息），终端然后挂起。

这正在使用react-slider 0.11.2，styled-components 4.3.1和jest 24.8.0。

注意：如果我不将组件导入样式文件，则测试运行良好，所以我认为导入的组件样式一定做错了吗？

使用样式化组件对导入的组件进行样式设置会导致Jest崩溃

0 个答案: