对 react + redux 的开玩笑测试在 prop 中说未定义的值答案

【问题标题】：jest testing for react + redux saying undefined value in prop对 react + redux 的开玩笑测试在 prop 中说未定义的值
【发布时间】：2020-12-12 21:01:46
【问题描述】：

我正在 Jest 中测试一个使用 React 和 Redux 编写的程序，但我在控制台中收到此错误。

console.error
  Warning: Failed prop type: The prop `prop` is marked as required in `Component`, but its value is `undefined`.

这是我为测试编写的代码：

import React from 'react';
import { Provider } from 'react-redux';
import renderer from 'react-test-renderer';
import configureStore from 'redux-mock-store';
import App from './App';
 
const mockStore = configureStore([]);
 
describe('My Connected React-Redux Component', () => {
  let store;
  let component;
 
  beforeEach(() => {
      store = mockStore({
      prop: [],
      hasErrored: false,
      isLoading: false,
    });
    component = renderer.create(
      <Provider store={store}>
        <App />
      </Provider>
    );
  });
 
  it('should render with given state from Redux store', () => {
    expect(component.toJSON()).toMatchSnapshot();
  });

这就是 App.js 的样子（提供者添加在 index.js 上）

import Component from './components/Component';

function App() {

  return (
    <div className="App">
        <Component></Component>
    </div>
  );
}

export default App;

【问题讨论】：

可以贴出App的代码吗？
已更新！
Component 有类似 mapStateToProps 的东西吗？
是的。 Component.propTypes = { fetchData: PropTypes.func.isRequired, items: PropTypes.array.isRequired, hasErrored: PropTypes.bool.isRequired, isLoading: PropTypes.bool.isRequired }; const mapStateToProps = (state) => { return { items: state.items, hasErrored: state.itemsHasErrored, isLoading: state.itemsIsLoading }; }; const mapDispatchToProps = (dispatch) => { return { fetchData: (url) => dispatch(itemsFetchData(url)), }; };

标签： reactjs redux jestjs

【解决方案1】：

您的App 组件呈现Component 组件。是 Component 抱怨它需要一个道具。您应该更新mapStateToProps 以提供prop，或者您可以简单地这样做：

import Component from './components/Component';

function App() {

  return (
    <div className="App">
        <Component prop="foo"></Component>
    </div>
  );
}

export default App;

【讨论】：