Можно ли удалить тему из тестового рендера React? - PullRequest
Новая
       31

Можно ли удалить тему из тестового рендера React?

1 голос
/ 15 апреля 2020

Я пишу некоторые модульные тесты в React native, используя рекомендованную react-test-renderer, целая куча наших компонентов использует библиотеку react-native-elements для обеспечения контроля.

Однако я обнаружил, что в моих маленьких тестах моментальных снимков объект темы составляет большую часть содержимого и затрудняет просмотр фактических изменений. Мне интересно, если кто-нибудь знает способ выключить это?

Единственная идея, которую я пока представляю, - это обернуть каждый отдельный тест в ThemeProvider и предоставить ему пустую тему, которая является множеством шаблонов.

Вот пример снимок 

exports[`LocationInfo renders correctly 1`] = `
<Text
  style={Object {}}
  theme={
    Object {
      "colors": Object {
        "disabled": "hsl(208, 8%, 90%)",
        "divider": "#bcbbc1",
        "error": "#ff190c",
        "grey0": "#393e42",
        "grey1": "#43484d",
        "grey2": "#5e6977",
        "grey3": "#86939e",
        "grey4": "#bdc6cf",
        "grey5": "#e1e8ee",
        "greyOutline": "#bbb",
        "platform": Object {
          "android": Object {
            "error": "#f44336",
            "primary": "#2196f3",
            "secondary": "#9C27B0",
            "success": "#4caf50",
            "warning": "#ffeb3b",
          },
          "ios": Object {
            "error": "#ff3b30",
            "primary": "#007aff",
            "secondary": "#5856d6",
            "success": "#4cd964",
            "warning": "#ffcc00",
          },
        },
        "primary": "#2089dc",
        "searchBg": "#303337",
        "secondary": "#8F0CE8",
        "success": "#52c41a",
        "warning": "#faad14",
      },
    }
  }
>
  KEY/100, Main Building
</Text>
`;

1 Ответ

0 голосов
/ 15 апреля 2020

Вы можете создать макет HO C, который пропустит полученный реквизит и, возможно, добавит некоторую тему макета 

const mockHOC = WrappedComponent => {
  const ThemedComponent = (props) => (
    <WrappedComponent {...props} theme="omitted" />
  );
  ThemedComponent.displayName = `MockThemed(${WrappedComponent.displayName ||  WrappedComponent.name || 'Component'})`
  return ThemedComponent;
};

1. Вы можете использовать spyOn, чтобы присоединить фиктивную реализацию к withTheme

jest.setup.js ( setupFilesAfterEnv ) 
import RNE from 'react-native-elements';

const mockHOC = // ....;
jest.spyOn(RNE, 'withTheme').mockImplementation(mockHOC)

2. Вы можете попробовать определить глобальный макет

__mocks__/react-native-elements/config/withTheme.js 
const mockHOC = // ....;
export default jest.fn(mockHOC)
...