Reactjs 带有react本机测试库的样式化组件主题

Reactjs 带有react本机测试库的样式化组件主题,reactjs,typescript,react-native,styled-components,react-native-testing-library,Reactjs,Typescript,React Native,Styled Components,React Native Testing Library,我已经被困了一段时间,试图弄清楚我到底做错了什么,我觉得我已经尝试了我找到的每一个解决方案,但都不起作用。为了描述正在发生的事情,我制作了最简单的组件来显示正在发生的事情 这是我的主题 导出默认常量主题={ 颜色:{ 白色:“#FFFFFF”, 黑色:“#000”, 浅灰色:“#f0f2f1”, 暗灰色:“#909190”, 原色:'#007772', 第二种颜色:“#0775BC”, textColor:“#231F20”, lightPrimary:“#DBFFFF”, 红色:“#B80F0

我已经被困了一段时间,试图弄清楚我到底做错了什么,我觉得我已经尝试了我找到的每一个解决方案,但都不起作用。为了描述正在发生的事情,我制作了最简单的组件来显示正在发生的事情

这是我的主题

导出默认常量主题={
颜色:{
白色:“#FFFFFF”,
黑色:“#000”,
浅灰色:“#f0f2f1”,
暗灰色:“#909190”,
原色:'#007772',
第二种颜色:“#0775BC”,
textColor:“#231F20”,
lightPrimary:“#DBFFFF”,
红色:“#B80F0A”,
primaryHalf:“#7FBAB8”,
},
字体:{
家庭:'努尼托普通',
},
};
这是我的部件

从“React”导入React;
从“样式化组件/本机”导入样式化;
const Wrapper=styled.View`
背景色:${(道具)=>props.theme.colors.white};
`;
常量TestSimpleComponent:React.FC=({children})=>{
返回{children};
};
导出默认TestSimpleComponent;
非常简单,只是用主题中的白色背景来包装一些东西

最后,这是我的简单测试

从“React”导入React;
从“react native”导入{Text};
从'@testing library/react native'导入{render};
从“./TestSimpleComponent”导入TestSimpleComponent;
从“样式化组件”导入{ThemeProvider};
从“../../themes/primary”导入主题;
描述('TestSimpleComponent',()=>{
它('显示正确的子项',()=>{
常量{queryByText}=render(
试验
,
);
expect(queryByText('Test')).not.toBeNull();
});
});
下面是抛出的错误。基本上是说主题提供者没有将主题传递给组件,原因我似乎无法理解

TypeError:无法读取未定义的属性“white”
3 | 
4 | const Wrapper=styled.View`
>5 |背景色:${(道具)=>props.theme.colors.white};
|                                                       ^
6 | `;
7 | 
8 | const TestSimpleComponent:React.FC=({children})=>{
我觉得我已经尝试了我在这里发现的所有与有相同问题的人相关的东西,但似乎没有任何东西起作用。唯一起作用的是我手动将主题传递给包装器,这不是一个可行的解决方案,因为我有一个大型应用程序,在所有地方都使用样式化组件中的主题

以前,每当我使用颜色文件时,我的所有测试都通过了,但一旦我将其切换到主题化,一切都崩溃了

我还尝试了所有引用的内容


有人知道我可能做错了什么吗?

以防万一有人想知道答案是什么。 我遇到的问题的解决方案正在改变

从“样式化组件”导入{ThemeProvider};

从'styled components/native'导入{ThemeProvider};