Как проверить подключенный компонент, завернутый в другой подключенный компонент? - PullRequest
Новая
       13

Как проверить подключенный компонент, завернутый в другой подключенный компонент?

1 голос
/ 10 мая 2019

Я хочу проверить свой чистый компонент, поэтому я делаю это:

MyComp.js 

export MyComp = props => {
  return (
    <Wrapper>Content</Wrapper>
  )
}

const MyCompConn = connect()(MyComp);
export default MyCompConn;

Где <Wrapper>: 

export Wrapper = ({children}) => {
  return (
    <div>{children}</div>
  )
}

const WrapperConn = connect()(Wrapper);
export default WrapperConn;

MyComp.test.js 

import React from 'react';
import renderer from 'react-test-renderer';

import { MyComp } from '../../MyComp';


describe('With Snapshot Testing', () => {
  it('renders!"', () => {
    const component = renderer.create(<Login />);
    const tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });
});

Теперь, когда я запускаю yarn test, я получаю эту ошибку:

Invariant Violation: Could not find "store" in either the context or props of "Connect(AppWrapper)". Either wrap the root component in a <Provider> or explicitly pass "store" as a prop to "Connect(AppWrapper)"

И это происходит потому, что <Wrapper>подключен в моем <MyComp> компоненте, но я не уверен, как проверить , просто последний, даже если он наложен на подключенный компонент.

Ответы [ 2 ]

2 голосов
/ 10 мая 2019

Чтобы протестировать наш компонент без использования смоделированного хранилища, мы можем смоделировать саму связь с Response-Redux, используя Jest. ПФБ пример: 


import React from 'react';
import renderer from 'react-test-renderer';

import { MyComp } from '../../MyComp';

jest.mock('react-redux', () => ({
  connect: () => {
    return (component) => {
      return component
    };
  }
}));

describe('With Snapshot Testing', () => {
  it('renders!"', () => {
    const component = renderer.create(<Login />);
    const tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });
});

Теперь будет визуализироваться компонент Wrapper напрямую, а не компонент connected Wrapper.

0 голосов
/ 10 мая 2019

Попробуйте это: 

import configureMockStore from 'redux-mock-store';

const store = mockStore({});
const component = renderer.create(<Provider store={store}><Login /></Provider>);
...