时间戳

首页 > 解决方案 > 对 react + redux 的开玩笑测试在道具中说未定义的值

reactjs - 对 react + redux 的开玩笑测试在道具中说未定义的值

问题描述

我正在 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;

标签： reactjsreduxjestjs

解决方案

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

import Component from './components/Component';

function App() {

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

export default App;

推荐阅读