测试期间未为子样式组件提供正确的主题

Posted 2023-03-16

【中文标题】测试期间未为子样式组件提供正确的主题

【英文标题】：Child styled-component not being provided with correct theme during test

【发布时间】：2019-12-17 03:53:32

【问题描述】：

我正在尝试编写一个 mount(<MyComponent />)，但我在使用 styled-components 时遇到问题，由 MyComponent 呈现

子组件

const Layout = styled.View`
  background-color: $( theme ) => theme.background.main;
`

测试组件

const MyComponent = () => (
  <Modal visible>
    <Layout>
      ...
    </Layout>
  </Modal>
)

我的测试

const theme = 
  background: 
    main: '#fff',
  ,


it ('should mount', () => 
  mount(
    <ThemeProvider theme=theme>
      <MyComponent />
    </ThemeProvider>
  )
)

当我运行这个测试时，我收到一个错误Cannot read property 'main' of undefined

我尝试从Layout 组件控制台记录theme 道具，它确认提供的主题道具是一个空对象，而不是来自主题提供者的主题。有什么方法可以mount 使用提供的主题？

我也尝试使用组件包装器，但结果保持不变

mount(<MyComponent />, 
  wrappingComponent: ThemeProvider,
  wrappingComponentProps: 
    theme,
  ,
)

包版本：styled-components 是 4.3.2，enzyme 是 3.10.0

【参考方案1】：

您的代码有一点错误。在您的测试中查看您的 theme 对象。

它具有 backgroundColor 属性，但在您的代码中，您使用属性 theme.background

【讨论】：

很好，不幸的是这并不能解决我的问题:(我在我的项目中正确，只是在这里写错了......我更新了我的帖子

稍微修改一下代码：const Layout = styled.View` background-color: $( props ) => props.theme.background.main;`

ThemeProvider 会为你的组件注入一个新的 theme 属性。尝试这样使用

我正在尝试像这样使用ThemeProvider。问题是它不适用于应该使用Context 来获取主题但在Enzyme 中不起作用的子组件。使用该应用程序时，此组件按预期工作

您使用的是哪个 SC 版本？

【参考方案2】：

最终我能够使用react-test-renderer 而不是enzyme 使这个测试工作

辅助函数

const renderWithTheme = (component: JSX.Element) =>
    renderer.create(<ThemeProvider theme=darkTheme>component</ThemeProvider>)

测试：

it('renders', () => 
    const component = renderWithTheme(
        <InputModal open=true value='abc' onEditing=mockEditing title="Test" onEndEditing=mockEndEditing />,
    )
    expect(component).toMatchSnapshot()
)