带有反应本机测试库的样式组件主题

Question

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

这是我的主题

export default const theme = {
    colors: {
        white: '#FFFFFF',
        black: '#000',
        lightGray: '#f0f2f1',
        darkGray: '#909190',
        primaryColor: '#007772',
        secondaryColor: '#0775BC',
        textColor: '#231F20',
        lightPrimary: '#DBFFFF',
        red: '#B80F0A',
        primaryHalf: '#7FBAB8',
    },
    font: {
        family: 'Nunito-Regular',
    },
};

这是我的组件

import React from 'react';
import styled from 'styled-components/native';

const Wrapper = styled.View`
    background-color: ${(props) => props.theme.colors.white};
`;

const TestSimpleComponent: React.FC = ({ children }) => {
    return <Wrapper>{children}</Wrapper>;
};

export default TestSimpleComponent;

非常简单，只是用来自主题的白色背景包裹一些东西。

最后，这是我的简单测试

import React from 'react';
import { Text } from 'react-native';
import { render } from '@testing-library/react-native';

import TestSimpleComponent from './TestSimpleComponent';
import { ThemeProvider } from 'styled-components';
import theme from '../../themes/primary';

describe('TestSimpleComponent', () => {
    it('displays correct children', () => {
        const { queryByText } = render(
            <ThemeProvider theme={theme}>
                <TestSimpleComponent>
                    <Text>Test</Text>
                </TestSimpleComponent>
            </ThemeProvider>,
        );
        expect(queryByText('Test')).not.toBeNull();
    });
});

这是抛出的错误。基本上是说主题提供者由于某种我似乎无法弄清楚的原因而没有将主题传递给组件。

TypeError: Cannot read property 'white' of undefined

      3 | 
      4 | const Wrapper = styled.View`
    > 5 |     background-color: ${(props) => props.theme.colors.white};
        |                                                       ^
      6 | `;
      7 | 
      8 | const TestSimpleComponent: React.FC = ({ children }) => {

我觉得我已经尝试了在这里找到的所有东西，但似乎没有任何效果。唯一有效的方法是我手动将主题传递给包装器，这不是一个可行的解决方案，因为我有一个大型应用程序，它在各处的样式组件中使用主题。

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

我也尝试了这里引用的所有内容。

有谁知道我可能做错了什么？

Answer 1

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

import { ThemeProvider } from 'styled-components';

到

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