Typescript / React: машинопись не распознает реквизиты, предоставляемые через React.cloneElement () - PullRequest
2 голосов
/ 18 апреля 2019

В настоящее время я пишу серию модульных тестов с использованием Jest / Enzyme в проекте Typescript / React.Для перевода я использую библиотеку react-intl.Эта библиотека предоставляет документацию о том, как написать вспомогательные функции, которые обертывают методы поверхностного / монтирования Enzyme и внедряют соответствующие реквизиты: https://github.com/yahoo/react-intl/wiki/Testing-with-React-Intl#enzyme.

Это все работает, как и ожидалось, и мои тесты проходят, однако Typescript выдаетошибка проверки типа, поскольку она не осознает, что реквизиты вводятся методом обертки.

Пример ниже:

Компонент:

interface IWrapperProps {
    intl: InjectedIntl;
}

interface IWrapperQuery {
    data?: ISearchTerm;
    loading: boolean;
    error?: Error;
}

const SearchWrapper: SFC<IWrapperProps> = props => {
    return (
        ...
    );
};

Тест:

it('renders correctly', async () => {
    const wrapper = mountWithHelpers(<SearchWrapper />, { mocks });
    await wait(50);
    expect(wrapper).toMatchSnapshot();
});

Вспомогательный метод:

// Int Provider
const intlProvider = new IntlProvider({ locale: 'en-gb', messages });
const { intl } = intlProvider.getChildContext();

function nodeWithIntlProp(node: any) {
    return React.cloneElement(node, { intl });
}

// Mount render
export function mountWithHelpers(node: any, { context = {}, childContextTypes = {}, mocks = [], store = null, ...additionalOptions } = {}) {
    const reduxStore = store || createStore(() => {});
    return mount(
        <Provider store={reduxStore}>
            <ThemeProvider theme={theme}>
                <MockedProvider mocks={mocks} addTypename>
                    {nodeWithIntlProp(node)}
                </MockedProvider>
            </ThemeProvider>
        </Provider>,
        {
            context: Object.assign({}, context, { intl }),
            childContextTypes: Object.assign({}, { intl: intlShape }, childContextTypes),
            ...additionalOptions
        }
    );
}

Ошибка при наборе текста: Property 'intl' is missing in type '{}' but required in type 'IWrapperProps'. Я уверен, чтовводится подпорка, как вы можете видеть соответствующую подпорку в файлах снимков Jest.Это просто вопрос Typescript, который не признает, что intl реквизит предоставлен оберткой.

Любой совет будет очень признателен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...