тестирование моментальных снимков. Реагирование на подключенный компонент с помощью PropTypes.

Question

У меня есть компонент в моем приложении React, который связан react-redux с двумя реквизитами

import PropTypes from "prop-types";
import { createNewPlayer } from "../actions/AllActions";
class HomePage extends React.Component {...}
HomePage.propTypes = {
  createNewPlayer: PropTypes.func.isRequired,
  history: PropTypes.shape({
    push: PropTypes.func.isRequired
  }).isRequired
};
export default connect(null,{ createNewPlayer })(HomePage);

в index.js У меня есть ReactDOM.render(<BrowserRouter><Provider store={store}> ...)

и App.js const App = () => (<Route path="/" exact component={HomePage} />);export default App;

для тестирования моментального снимка HomePage I, используя Jest и Enzyme Я написал

import React from "react";    
import toJSON from "enzyme-to-json";    
import { shallow, mount } from "enzyme";
import HomePage from "../components/HomePage";

test("should render the HomePage Component", () => {
  const props = { createNewPlayer: jest.fn(), push: jest.fn() };
  const wrapper = mount(shallow(<HomePage {...props} />));
  expect(toJSON(wrapper)).toMatchSnapshot();
});

, где я получаю ошибку

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

какя должен сделать снимок для проверки подключенного компонента с proptype

Answer 1

Вы не должны проверять подключенный компонент.Мы хотим протестировать неподключенную версию, потому что мы хотим иметь возможность предоставлять набор динамических реквизитов.реквизит данных.в мире тестирования вы должны создать каталог / fixture внутри каталога / tests.Вы должны сохранить свои базовые данные или фиктивные данные в этом каталоге, а затем экспортировать их.Или вы можете создать свои данные внутри тестового файла, но это сделает беспорядок.

export class HomePage extends React.Component {...}

в тестовом файле

import React from "react";    
import toJSON from "enzyme-to-json";    
import { shallow, mount } from "enzyme";
import {HomePage} from "../components/HomePage";
import props from "../fixtures/createNewPlayer" //in here you should put your data

test("should render the HomePage Component", () => {
  //const props = { createNewPlayer:jest.fn(), push: jest.fn(); IMPORTED ALREADY
  const wrapper = mount(shallow(<HomePage {...props} />));
  expect(toJSON(wrapper)).toMatchSnapshot();
});

Answer 2

В вашем тестовом примере не похоже, что вы пытаетесь протестировать всю интеграцию от App и ниже, поскольку в своем тесте вы ссылаетесь только на HomePage. Таким образом, вы можете экспортировать класс для тестирования в дополнение к экспорту подключения по умолчанию. Таким образом, ваши тесты будут использовать import { HomePage } from '...';, в то время как другие ваши компоненты будут использовать значение по умолчанию import HomePage from '...';