Есть две проблемы с тестированием компонентов, использующих React Intl с Enzyme и Jest:
injectIntl
компонент более высокого порядка нарушит неглубокий рендеринг, потому что он будет отображать компонент-оболочку вместо вашего компонента.intl
опора сделает тестирование снимков бесполезным, потому что каждый снимок будет содержать все ваши сообщения.
Решение основано на вики React Intl:
- Добавьте две новые вспомогательные функции в ваш установочный файл Jest (setupFiles):
import { IntlProvider,
intlShape} from "react-intl"; // Create IntlProvider to retrieve React Intl context const intlProvider = new IntlProvider( { locale: "en", messages: { message1: "Hello world" } }, {} ); const { intl } = intlProvider.getChildContext(); // `intl` prop is required when using injectIntl HOC const nodeWithIntlProp = node => React.cloneElement(node, { intl }); // shallow() with React Intl context global.shallowWithIntl = (node, { context, ...options } = {}) => { return shallow(nodeWithIntlProp(node), { ...options, context: { ...context, intl } }); };
// mount() with React Intl context global.mountWithIntl = ( node, { context, childContextTypes, ...options } = {} ) => { return mount(nodeWithIntlProp(node), { ...options, context: { ...context, intl }, childContextTypes: { intl: intlShape, ...childContextTypes } }); };
2. Экспортируйте компонент с injectIntl
и без него:
import React, { Component } from "react";
import { injectIntl } from "react-intl";
export class Pony extends Component {
/* _ */
}
export default injectIntl(Pony);
3. Напишите тестовые примеры как обычно, используя помощники shallowWithIntl
и mountWithIntl
:
import React from "react";
import { Pony } from "./Pony";
test("pink pony", () => {
const wrapper = shallowWithIntl(<Pony color="pink" />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.find(".tail").prop("value")).toBe("pink");
});
P. S. Вам также могут понравиться мои более общие статьи о тестировании компонентов React с помощью Jest и Enzyme и Шпаргалка по Jest.