Блог

Я пишу тест следующим образом:

 class Foo extends Component {
    render() {
        return (
            <div data-test="foo-test">
                <span data-test="foo-test">Bar</span>
            </div>
        )
    }
}

describe('Login Page', () => {
    test('logs in to the application', async () => {
        const component = await componentBuilder(Foo, '[data-test="foo-test"]');

    });
});
  

componentBuilder Выглядит следующим образом:

 const componentBuilder = async (RootComponent, selector) => {
    try {
        const component = mount(
            <Wrapper store={store}>
                <RootComponent />
            </Wrapper>
        );

        console.log(component.debug());

        if (selector) {
            await waitForComponentSelector(selector, component);
        }

        return component;
    } catch(err) {
        throw err;
    }
};
  

Wrapper выглядит так:

 class Wrapper extends Component {
    ...
    render() {
        return (
            <Provider store={this.props.store}>
                <LocaleProviderWrapper>
                    <ThemeProvider>{this.props.children}</ThemeProvider>
                </LocaleProviderWrapper>
            </Provider>
        );
    }
}
  

LocaleProviderWrapper выглядит так:

 const LocaleProviderWrapper = ({ children, locale }) => {
    ...
    return (
        <IntlProvider locale={locale} messages={messages}>
            {children}
        </IntlProvider>
    )
};

const propTypes = {
    children: PropTypes.element.isRequired,
    locale: PropTypes.string.isRequired,
};

LocaleProviderWrapper.propTypes = propTypes;

const mapStateToProps = state => ({
    locale: getLoggedInUserLocale(state),
});

export default connect(mapStateToProps)(LocaleProviderWrapper);
  

Вывод из console.log(component.debug()); в ComponentBuilder является:

 <Wrapper store={{...}}>
      <Provider store={{...}}>
        <Connect(LocaleProviderWrapper)>
          <LocaleProviderWrapper locale="en-GB" dispatch={[Function]}>
            <IntlProvider locale="en-GB" messages={{...}} defaultLocale="en-GB" />
          </LocaleProviderWrapper>
        </Connect(LocaleProviderWrapper)>
      </Provider>
    </Wrapper>
  

Как вы можете видеть, Foo не отображается как дочерний элемент <IntlProvider> , который я ожидал бы увидеть. Есть ли причина, почему это так?