使用 react-test-renderer w/ styled-components & Theme (React Native)

Question

我有一个使用styled-system的styled-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工作不正常。

如有任何帮助，我们将不胜感激！谢谢

Answer 1

经过进一步的谷歌搜索，我应该使用styled-components/native的ThemeProvider

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