Использование react-test-renderer со стилями-компонентами и темой (React Native)

Question

У меня есть styled-component что использует styled-system и он работает отлично, но когда я иду тестировать компонент, я не могу заставить его правильно заполнять стили из темы.

Это странно, потому что если я применяю такой реквизит, как 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

После небольшого поиска в Google выясняется, что я должен использовать ThemeProvider из styled-components/native

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