为什么映射的子组件不使用安装在酶包装器中呈现？

Question

我有一个渲染 25 个子组件（扩展）的组件（扩展视图）。

const ExpansionView = ({ expansion }: {[key: string]: boolean} = {}): ReactElement => {
  const validExpansion: StrArr = Object.keys(expansion).slice(0, -2); 

  // Generate multiple expansion components with respective name and img props
    const expansionGenerator = (expArr: StrArr): ReactElement[] => {
        return expArr.map((exp, i) => {
            return <ErrorBoundary key={i}>    
                    <Expansion 
                        name= {exp}
                        key = {exp} 
                        img = {allImage[i]} />
                 </ErrorBoundary>
        });
    }
  
  return(
        <StyledExpansionView id='expansionView'>
                {expansionGenerator(validExpansion)}
        </StyledExpansionView>
  )
  
  const mapStateToProps = (state: {expansions: {[key:string]: boolean}}) => {
    return {
        expansion: state.expansions,
    }
}
 
export default connect(mapStateToProps)(ExpansionView);

该应用程序按原样完美运行。

笑话/酶测试：

import ReactDOM from 'react-dom';
import ExpansionView from '../components/ExpansionView';
import { shallow, mount } from 'enzyme'
import configureStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import Expansion from '../components/Expansion'
import ClearButton from '../components/ClearButton';
import CurrentRotationButton from '../components/CurrentRotationButton';

const initState = { allCard: [], expansions: [] };
const mockStore = configureStore();

describe('ExpansionView', () => {
    let expansion = {
        "Core": false,
        "Naxxramas": false,
        "Goblins vs Gnomes": false,
        "Blackrock Mountain": false,
        "The Grand Tournament": false, 
        "The League of Explorers": false,
        "Whispers of the Old Gods": false,
        "One Night in Karazhan": false,
        "Mean Streets of Gadgetzan": false,
        "Journey to Un'Goro": false,
        "Knights of the Frozen Throne": false,
        "Kobolds & Catacombs": false,
        "The Witchwood": false, 
        "The Boomsday Project": false,
        "Rastakhan's Rumble": false,
        "Rise of Shadows": false,
        "Saviors of Uldum": false,
        "Descent of Dragons": false,
        "Galakrond's Awakening": false,
        "Ashes of Outland": false,
        "Scholomance Academy": false,
        "Madness At The Darkmoon Faire": false,
        "Forged in the Barrens": false, 
        "United in Stormwind": false,
        "Fractured in Alterac Valley": false,
        "current rotation": false,
        "clear": false,
    }
    const wrapper = mount(<Provider store={mockStore(initState)}><ExpansionView /></Provider>);
    
  it('renders 25 expansions', () => {
      expect(wrapper.find(Expansion).length).toBe(25); // returns 0
      expect(wrapper.find('img').length).toBe(25); // returns 0
   });
}

酶配置在单独的 setupTest.js 文件中。

如最后两行所示，它们都返回 0。这告诉我 jest 出于某种原因根本无法 map 取出这些组件。 为开玩笑映射子组件是否需要配置？

我也尝试过浅，但它没有意义，因为浅不会渲染孩子。

我整天都在查看这个网站上的代码库以及其他类似的问题。 但是，我仍然无法弄清楚。

请看一下。 任何建议将不胜感激！

Answer 1

使用 wrapper.debug() 时，HTML 中没有呈现扩展。

这是通过更改 initState 来解决的：

const initState = { allCard: [], expansions: [] };

对此：

const initState = { allCard: [], expansions: expansion };

我们使用的是mockStore，而ExpansionView组件需要在props中扩展state（来自redux store），所以我们必须在mockStore中做同样的事情。

但是，在这种情况下，使用 .children() 或 .hostNodes() 的所有其他尝试都不起作用。