如何在 react-native testing-library 中使用 styled-components 主题答案

【问题标题】：How to use styled-components theme with react-native testing-library如何在 react-native testing-library 中使用 styled-components 主题
【发布时间】：2021-07-13 22:23:21
【问题描述】：

我有一个简单的组件：

import React, { FunctionComponent } from 'react';
import { ViewStyle, StyleProp, StyleSheet } from 'react-native';

import {
    RoundedCardBackground,
} from './index';

type RoundedCardProps = {
    style?: StyleProp<ViewStyle>;
    shadow?: boolean;
};

const RoundedCard: FunctionComponent<RoundedCardProps> = ({
    style,
    children,
    shadow,
}) => {
    let shadowStyle = shadow ? styles.shadow : undefined;
    return (
        <RoundedCardBackground style={[shadowStyle]}>
            {children}
        </RoundedCardBackground>
    );
};

const styles = StyleSheet.create({
    shadow: {
        elevation: 2,
        shadowColor: '#000000',
        shadowOffset: {
            width: 0,
            height: 3,
        },
        shadowRadius: 10,
        shadowOpacity: 0.05,
    },
});

export default RoundedCard;

我正在尝试测试一个简单的功能，但我收到了一个来自 styled-components 主题的错误。

这是我的测试：

import React from 'react';
import { Text } from '/components/atoms';
import { render } from '/utilities/testUtils';
import theme from '../../themes/primary';

import RoundedCard from './RoundedCard';

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

这是我得到的错误：

TypeError: Cannot read property 'white' of undefined

      79 | export const RoundedCardBackground = styled.View`
      80 |     flex-shrink: 1;
    > 81 |     background-color: ${(props) => props.theme.colors.white};
         |                                                       ^
      82 |     border-radius: 6px;
      83 |     overflow: hidden;
      84 | `;

我有什么遗漏的吗？我认为将组件包装在 ThemeProvider 中可以解决问题，但仍然出现错误。

仅供参考，这是引发错误的样式组件

export const RoundedCardBackground = styled.View`
    flex-shrink: 1;
    background-color: ${(props) => props.theme.colors.white};
    border-radius: 6px;
    overflow: hidden;
`;

【问题讨论】：

标签： react-native styled-components react-native-testing-library

【解决方案1】：

我认为 Jest（或其他测试实用程序）找不到 props.theme，因为主题是 undefined。您必须将主题传递给您的组件。

import React from 'react';
import { Text } from '/components/atoms';
import { render } from '/utilities/testUtils';

import RoundedCard from './RoundedCard';

const theme = {
    colors: {
        white: "#fff"
    }
}

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

【讨论】：

抱歉，我忘记包含我的主题导入。我编辑了我的问题并将其包括在内。即使我像你刚才那样导入我的主题或手动输入主题，我仍然遇到同样的问题
那么我认为你应该改变你的render 方法。检查这个link
我调整了我的实用程序/testUtils 文件以匹配该链接中的所有内容，并在您发布的链接中使用了该渲染。它仍然抛出同样的错误。
我找到了same problem on StackOverflow。我建议将 Jest 用于您的测试组件并将theme 传递给您的组件。

【解决方案2】：

我遇到的问题的解决方案正在改变

import { ThemeProvider } from 'styled-components';

到

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

【讨论】：