Как смоделировать контекстный потребитель React элемент в реагировать родной

Question

Я не нашел никаких доказательств того, что кто-то мог ранее решить и решить этот вопрос. У меня есть собственный компонент реагирования, который использует контекст, и я хотел бы отобразить этот компонент.

// ThemeContext.js
import React from 'react';

export const ThemeContext = React.createContext(
    { color: 'white' }
);

// MyText.js
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Text } from 'react-native';

export class MyText extends PureComponent {
    static propTypes = {
        children: PropTypes.node.isRequired
    };

    static defaultProps = {};

    render() {
        let text = this.props.children;
        return (
            <Text>
                {text}
            </Text>
        );
    }
};

// MyText.test.js
import React from 'react';
import { MyText } from "../MyText";
import { ThemeContext } from '../ThemeContext';

describe('MyText', () => {

    it('should render component', () => {
        const wrapper = renderer.create(
            <ThemeContext.Provider value={mobileColorThemes.standard}>
                <ThemeContext.Consumer>
                    {(theme) => <MyText>abc</MyText>}
                </ThemeContext.Consumer>
            </ThemeContext.Provider>
        );
        expect(wrapper).toMatchSnapshot();
    });
});

Но когда я запускаю тестовый файл с шуткой, jest text/__tests__/MyText.test.js

Я получаю следующую ошибку

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

      at invariant (node_modules/fbjs/lib/invariant.js:42:15)
      at createFiberFromElementType (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1933:5)
      at createFiberFromElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1878:15)
      at reconcileSingleElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3334:19)
      at reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3433:35)
      at reconcileChildrenAtPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4091:30)
      at reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4074:5)
      at updateHostRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4268:9)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4563:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6529:16)...

Шутит ли работа с родным и контекстом? Кто-нибудь в мире заставил это работать? Используя jest v24.1.0, Reaction-native 0.56, Reaction-Test-Renderer 16.0.0

Answer 1

react и react-test-renderer имеют соответствующие версии.Поскольку контекстный API был представлен в React 16.3, ожидается, что react-test-renderer@16.0.0 не поддерживает элемент <Provider>.

react-test-renderer должен иметь то же ограничение версии, что и react.