使用带有样式组件和主题的 react-test-renderer (React Native)

Posted

技术标签:

【中文标题】使用带有样式组件和主题的 react-test-renderer (React Native)【英文标题】:Using react-test-renderer w/ styled-components & Theme (React Native) 【发布时间】:2021-01-27 20:58:59 【问题描述】:

我有一个使用styled-systemstyled-component,它运行良好,但是当我去测试组件时,我似乎无法让它从主题中正确填充样式。

这很奇怪,因为如果我应用像 marginLeft=1 这样的道具,这种风格会从 Theme.space 属性正确转换。这是color 系统的问题吗?

文本组件

import React from 'react';
import styled from 'styled-components/native';
import 
  color,
  space,
  typography,
  variant,
  system,
 from 'styled-system';

const textDecoration = system( textDecoration: true );
const textDecorationColor = system( textDecorationColor: true );
const textVariant = variant( scale: 'text' );
const Text = styled.Text`
  $textVariant
  $textDecoration
  $textDecorationColor
  $color <-- using color system
  $space
  $typography
`;

export default Text;

测试

import React from 'react';
import renderer from 'react-test-renderer';
import  ThemeProvider  from 'styled-components';

import Text from '../src/atoms/Text';
import Theme from '../src/theme';

test('Text is referencing Theme (colors)', () => 
  console.log('Theme navy -->', Theme.colors.navy); // Theme navy --> #004175

  const tree = renderer
    .create(
      <ThemeProvider theme=Theme>
        <Text color="navy" />
      </ThemeProvider>,
    ).toJSON();
  const [styles] = tree.props?.style || ;

  console.log('Post-render color -->', styles.color); // Post-render color --> navy

  expect(styles.color).toBe(Theme.colors.navy);
);
npm run test
...
 ● Text is referencing Theme (colors)

    expect(received).toBe(expected) // Object.is equality

    Expected: "#004175"
    Received: "navy"
...

通常我会使用color="primary" 进行测试,即#3592fb,但我只是收到一条错误消息,指出primary 不是样式属性color 的有效值,这告诉我ThemeProvider 是无法正常工作。

对此的任何帮助将不胜感激! 谢谢

【问题讨论】:

【参考方案1】:

在further googling 之后,我发现我应该使用来自styled-components/native 的 ThemeProvider

// change
import  ThemeProvider  from 'styled-components';
// to
import  ThemeProvider  from 'styled-components/native';

【讨论】:

以上是关于使用带有样式组件和主题的 react-test-renderer (React Native)的主要内容,如果未能解决你的问题,请参考以下文章

使用带有样式组件和主题的 react-test-renderer (React Native)

包括对带有 typescript 的样式化组件主题的媒体查询

如何在 next.js 中使用带有样式组件主题的 window.matchMedia?

带有样式组件的 Nextjs 不通过主题

添加带有材质表的组件更改 Material-UI AppBar 样式

使用酶和主题测试样式化组件