Ошибка при выполнении модульного теста в компоненте, подключенном к React-Redux

Я пытаюсь протестировать связанный компонент (реакция-редукция) с помощью jest-энзима. Я использую магазин response-redux-mock. Когда я запускаю свой тест, чтобы найти один div в компоненте, он дает мне эту ошибку.

Invariant Violation: Passing redux store in props has been removed and does not do anything. To use a custom Redux store for specific components, create a custom React context with React.createContext(), and pass the context object to React-Redux's Provider and specific components like: <Provider context={MyContext}><ConnectedComponent context={MyContext} /></Provider>. You may also pass a {context : MyContext} option to connect

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

describe("Input Component", () => {
let wrapper;
let store;
beforeEach(() => {
    store = mockStore(initialState);

    wrapper = shallow(<Input store={store} />);
});

it("should rendder without error", () => {
    expect(wrapper.find("div")).toHaveLength(1);
});
});

reactjs jestjs react-redux enzyme connected-components
person Aditya Gyawali    schedule 07.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Как вы импортируете свой компонент?

если вы импортируете его с помощью import App из './yourpath/App', например, вы фактически удерживаете компонент оболочки, возвращаемый функцией connect (), а не сам компонент приложения.

Чтобы иметь возможность протестировать сам компонент приложения без необходимости иметь дело с декоратором, вы должны также экспортировать недекорированный компонент:

import { connect } from 'react-redux'

// Use named export for unconnected component (for tests)
export class App extends Component {
/* ... */
}

// Use default export for the connected component (for app)
export default connect(mapStateToProps)(App)

И импортируйте его в свой тестовый файл следующим образом:

import { App } from './yourpath/App'
person codeKid    schedule 07.01.2019
comment
Я использую компонент экспорта по умолчанию для тестирования с помощью response-redux ... Я пробовал использовать компонент экспорта, поэтому я мог только протестировать этот компонент без response-redux. export default connect(mapStateToProps)(Input) - person Aditya Gyawali; 07.01.2019
comment
Как я уже сказал, чтобы протестировать только сам компонент, вы должны добавить ключевое слово экспорта перед вашим компонентом: класс экспорта App extends Component {} И добавить его в тестовый файл с помощью фигурных скобок: import {App} from ... - person codeKid; 07.01.2019
comment
Я понимаю вашу точку зрения, но я не хочу тестировать сам компонент, я уже сделал это, и он работает. Я хочу проверить, связано ли приложение с redux. И когда я пытаюсь проверить connected component, он выдает ошибку, о которой я упоминал в вопросе. - person Aditya Gyawali; 07.01.2019
comment
Если вы хотите протестировать его взаимодействие с Redux, вы можете обернуть его в ‹Provider› с магазином, созданным специально для этого модульного теста. - person codeKid; 07.01.2019
comment
Я добавил store = mockStore(initialState); wrapper = shallow( <Provider store={store}> <Input store={store} /> </Provider> ); МОЙ тест ** it("should rendder a div with className row", () => { expect(wrapper.find(".row")).toHaveLength(1); }); ** Ошибка ожидаемая длина: 1, получено: символы У меня есть этот div со строкой className - person Aditya Gyawali; 07.01.2019
comment
Я думаю, не стоит передавать store в свой компонент, только в Provider. Задача провайдера - передать вниз цепочку магазина всем компонентам. - person codeKid; 07.01.2019
comment
Это та же ошибка, даже если я не передаю хранилище внутри компонента. - person Aditya Gyawali; 07.01.2019