Javascript 反应测试与酶类型错误：无法读取属性'；州'；未定义的

我正在尝试使用enzyme浅层渲染对组件进行单元测试。试图测试组件的状态activeTab，它抛出

TypeError:无法读取属性状态

。我的手风琴。手风琴组件jsx代码

 class Accordion extends Component {
    constructor(props) {
        super(props)
        this.state = {
            activeTab: 0
        }
    }

    static defaultProps = {
        tabs: [{title: 'Status'}, {title: 'Movement'}]
    }

    render() {
        const { tabs } = this.props
            , { activeTab } = this.state
        return (
            <div className={`accordion`}>
                {tabs.map((t, i) => {
                    const activeClass = activeTab === i ? `accordion--tab__active` : ''
                    return(
                        <section key={i} className={`accordion--tab ${activeClass}`}>
                            <header className={`accordion--header`}>
                                <h4 className={`accordion--title`}>
                                    <button onClick={() => {this._selectAccordion(i)}}>{t.title}</button>
                                </h4>
                            </header>
                            <div className="accordion--content">
                                {t.title}
                                Content
                            </div>
                        </section>
                    )
                })}
            </div>
        )
    }
    _selectAccordion = activeTab => {this.setState({activeTab})}
}

export default Accordion

类手风琴扩展组件{
建造师（道具）{
超级（道具）
此.state={
活动选项卡：0
}
}
静态defaultProps={
选项卡：[{title:'Status'}，{title:'Movement'}]
}
render（）{
const{tabs}=this.props
，{activeTab}=this.state
返回(
{tabs.map（（t，i）=>{
const activeClass=activeTab==i？`accordion--tab\uu active`:''
返回(
{this.\u selectAccordion（i）}>{t.title}
{t.title}
内容
)
})}
)
}
_selectAccordion=activeTab=>{this.setState（{activeTab}）}
}
导出默认手风琴

和accordio.react.test.js

import { shallow } from 'enzyme'
import Accordion from './components/Accordion'

test('Accordion component', () => {
    const component = shallow(<Accordion name={`Main`}/>)
    expect(component.state('activeTab')).equals(0)
})

从“酶”导入{shall}
从“./components/Accordion”导入手风琴
测试（'手风琴组件'，（）=>{
常量分量=浅（）
expect（component.state（'activeTab'））.equals（0）
})

这可能是一个范围界定问题。在React中使用事件处理程序时，必须将构造函数中的事件处理程序绑定到“this”。以下是React的一些信息：

在JSX回调中，您必须小心这一点的含义。在里面 默认情况下，类方法不受绑定。如果你忘了 绑定this.handleClick并将其传递给onClick，这将是未定义的 当函数实际被调用时

这不是特定的行为；这是如何发挥作用的一部分 在JavaScript中工作。通常，如果您引用的方法没有（） 在它之后，比如onClick={this.handleClick}，您应该绑定它 方法

类手风琴扩展组件{
建造师（道具）{
超级（道具）
此.state={
活动选项卡：0
}
//此绑定是使`This`在回调中工作所必需的
this.\u selectAccordion=this.\u selectAccordion.bind（this）；
}
静态defaultProps={
选项卡：[{title:'Status'}，{title:'Movement'}]
}
_选择手风琴（活动选项卡）{
this.setState（{activeTab:activeTab}）
}
render（）{
const{tabs}=this.props，
{activeTab}=this.state
返回(
{tabs.map（（t，i）=>{
const activeClass=activeTab==i？`accordion--tab\uu active`:''
返回(
{this.\u selectAccordion（i）}>{t.title}
{t.title}
内容
)
})}
)
}
}

您的测试应该验证组件如何工作，而不是“如何更改状态”。你需要在你的组件中加入新的道具并得到一个结果，而结果是预期的

我已经用快照测试了我的组件

这是我当前项目的一个例子

describe('<Component />', () => {
  it('Page rendered', () => {
    const rendered = renderComponent({
      ...testProps,
      loadDataList,
      loading: true,
    });

    expect(rendered).toMatchSnapshot();
  });
});

描述（“”，（）=>{
它（'页面呈现'，（）=>{
渲染常量=渲染组件({
…测试道具，
加载数据列表，
加载：对，
});
expect（rendered.toMatchSnapshot（）；
});
});

虽然我必须将

.equals（0）

更改为

.toEqual（0）

，但测试在我的计算机上运行良好。也许你可以分享更多的调试信息，比如Ezyme/node版本，或者至少粘贴完整的错误消息-粘贴的错误消息肯定只有消息的一半。你在Jsx文件中导入了REACT吗？是的，我在

Jsx

文件中导入了REACT。你说

Jsx

文件，但是在accorbian.react.test.js中，您可以从“/components/Accordion.js导入Accordion，这是一个

js

文件，而不是

jsx

文件。您确定文件扩展名正确吗？无论如何，您不需要将文件扩展名放在文件路径中。这是一个错误，我已经修复了它，但在我的实际项目中，它只是

Accordion

请不要使用bind，如果您想将任何内容绑定到任意位置，请使用箭头函数。Bind非常慢，如果您知道V8是如何工作的，您应该知道这一点。

describe('<Component />', () => {
  it('Page rendered', () => {
    const rendered = renderComponent({
      ...testProps,
      loadDataList,
      loading: true,
    });

    expect(rendered).toMatchSnapshot();
  });
});