Question

使用jest和enzyme进行测试，我认为我所做的一切都不错，但是以某种方式得到警告：

警告：道具类型失败：在project中将道具ProjectPageUI标记为必需，但其值为undefined。在ProjectPageUI中

这是测试的样子：

test('shallow-render without crashing', () => {
  /*  
    project: PropTypes.object.isRequired,
   */

  const props = { 
    match: { params: {} },
  }
  const store = configureStore()(STATE_WITH_2_FAMILIES)
  shallow(<ProjectPageUIComponent store={store} {...props} />)
})

在ProjectPageUI.jsx内，我使用选择器获得了project属性：

const mapStateToProps = (state, ownProps) => ({
  project: getCurrentProject(state),
})

getCurrentProject如下：

export const getProjectsByGuid = state => state.projectsByGuid
export const getProjectGuid = state => state.currentProjectGuid

export const getCurrentProject = createSelector(
  getProjectsByGuid, getProjectGuid, (projectsByGuid, currentProjectGuid) => projectsByGuid[currentProjectGuid],
)

在STATE_WITH_2_FAMILIES中，我同时定义了projectsByGuid和currentProjectGuid，并且projectsByGuid分别具有currentProjectGuid和定义的对象的键。因此，现在我想知道为什么会发生此警告，以及我应该如何更改测试，因为我希望它完全没有问题：选择器从project获得state，应该是defined。

澄清

这就是ProjectPageUI的样子：

const ProjectPageUI = (props) => {
    ...
    ...
    return ( ... )
}

ProjectPageUI.propTypes = { 
  project: PropTypes.object.isRequired,
  ...
  ...
}

const mapStateToProps = (state, ownProps) => ({
  project: getCurrentProject(state),
  ...
  ...
})

export { ProjectPageUI as ProjectPageUIComponent }

export default connect(mapStateToProps)(ProjectPageUI)

Answer 1

尝试使用redux Provider组件包装您的组件使得Redux存储可用于所有被connect（）函数包装的嵌套组件。

shallow(
  <Provider store={store}>
    <ProjectPageUIComponent {...props} />
  </Provider>)

Answer 2

非常愚蠢，但这是错误导入ProjectPageUI的问题。我将其导入为：

import { ProjectPageUIComponent } from './ProjectPageUI'

它导入了未连接的组件，但应该已经导入了默认的方式：

import ProjectPageUI from './ProjectPageUI'

哪个解决了

Answer 3

因为您导出了原始组件

export { ProjectPageUI as ProjectPageUIComponent }

您可以直接测试它，而无需模拟Redux提供程序并存储

import { ProjectPageUIComponent } from '.'; // import raw component

...

test('shallow-render without crashing', () => {

  const props = { 
    match: { params: {} },
    project: { /* now mock up a project object for testing */ }
    // mock/supply any other required props
  }

  shallow(<ProjectPageUIComponent {...props} />)
});

您是否考虑过react-testing-library？ IMO是一种测试UI组件的更简洁的方法。对于一个简单的“渲染不崩溃”测试，它与上面的非常相似。

开玩笑-酶测试警告：道具类型失败

3 个答案: