Question

我正在尝试使用Jest + Enzyme测试无状态React组件，但始终会出现错误。我尝试通过测试其父组件PromiseLike来测试该组件，然后将该组件导入并呈现为Tables.js，但出现相同的错误。

<Table />

Table.js

TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)

  at table (src/components/UI/Table/Table.js:29:27)
  at Object.type (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:329:38)
  at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:145:34)
  at node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:333:37
  at withSetStateAllowed (node_modules/enzyme-adapter-utils/build/Utils.js:110:16)
  at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:332:70)
  at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:170:22)
  at shallow (node_modules/enzyme/build/shallow.js:21:10)
  at setup (src/containers/Tables/Tables.test.js:14:46)
  at Object.it (src/containers/Tables/Tables.test.js:25:9)
      at Promise (<anonymous>)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:169:7)

Table.test.js

import React from 'react'

import TableRow from './TableRow/TableRow'
import './Table.scss'

const getMaxPlaysInPercentage = (dataArr) => {
    let currentMax = 0
    let total = 0
    let currentMaxTitle = ''

    dataArr.forEach(obj => {
        const plays = Number(obj.plays)
        const keyForTitle = Object.keys(obj)[0]
        total += plays
        if(currentMax < plays) {
            currentMax = plays
            currentMaxTitle = obj[keyForTitle]
        }
    })
    const maxInPercentage = (currentMax / total * 100).toFixed(2)

    return {
        maxInPercentage, 
        currentMaxTitle
    }
}

const table = (props) => {
    const titles = Object.keys(props.titles).map((title, index) => {
        const key = `val${index}`
        return (
            <th
                key={title+key} 
                className="analytics-title analytics-table-cell"
                onClick={(e)=>props.sortColumnsHandler(props.tableName, title)}>
                {props.titles[title]}
            </th>
        )
    })

    const maxPlays = getMaxPlaysInPercentage(props.data)

    const contentRows = props.data.map((prop, index)=>{
        const key = `${props.tableName}-row${index}`
        return (<TableRow
                    key={key} 
                    tableName={props.tableName}
                    titles={props.titles}
                    valuePairs={prop}/>)
    })

    return (
        <section className="analytics-table">
            <h2>{props.header}</h2>
            <p>{maxPlays.maxInPercentage}% from {maxPlays.currentMaxTitle}</p>
            <table  className="analytics-content">
                <tbody>
                    <tr className="analytics-titles">
                        {titles}
                    </tr>
                    {contentRows} 
                </tbody>
            </table>
        </section>
    )
}

export default table

Answer 1

Table组件使用一些需要提供的props：

const titles = {
  // add test titles here
}
const data = [
  // add test data here
]
const enzymeWraper = shallow(
  <Table 
    titles={titles} 
    data={data}
    tableName="Test Table Name"
    header="Test Header"
  />
);

酶浅渲染组件未定义

1 个答案: