开发者问题收集

Jest：无法设置未定义的属性“props”

2016-04-20
3856
javascript reactjs jestjs

我开始学习 Jest，并创建了这个测试。但是当我运行它时，我收到以下消息。

我是否以错误的方式将 props 传递给 AppComponent？

TypeError: Cannot set property 'props' of undefined

App.js： 

const { store } = this.props;

return (
  <div>
    <h2 className={css(styles.hover)}>Welcome to the { store.name } project!</h2>
    <h3>This project is { store.description }.</h3>
    <MyComponent store={store} />
  </div>
);

App-test.js： 

const storeProp = {
  name: 'Reaxor',
  description: 'Hello'
}

describe('App', () => {
  it('returns the correct text', () => {

    // Render a checkbox with label in the document
    const app = TestUtils.renderIntoDocument(
      <App store={storeProp} />
    );

    const appNode = ReactDOM.findDOMNode(app);

    const h2 = TestUtils.findRenderedDOMComponentWithTag(app, 'h2')
    const h3 = TestUtils.findRenderedDOMComponentWithTag(app, 'h3')

    expect(h2.textContent).toEqual('Welcome to the Reaxor project!');
    expect(h3.textContent).toEqual('This project is Hello.')
  });
});
3个回答

在我看来，有些东西被模拟了，但其实不应该被模拟。您可以尝试在配置中禁用自动模拟 "automock": false ，看看该模型是否更适合您 :)

cpojer
2016-04-21

遗憾的是，我目前无法添加评论，但我想评论一下：行号会有所帮助（或者更好的是，堆栈跟踪）。是 

const app = TestUtils.renderIntoDocument(
    <App store={storeProp} />
);

引发了错误吗？

您还需要提供有关 App.js 的更多上下文。

React 在内部创建了一个“props”参数，它是一个对象，并将 props 作为参数粘贴到它上面。它试图对未定义的东西执行此操作。这表明您获取 <App /> 的方式存在问题。

  • 您是否在测试文件中需要 App.js？
  • 您是否确保 jest 没有嘲笑它？ （在某些版本中，它默认对所有必需文件执行此操作。）
  • App.js 是否正确编写（我希望该文件中的内容比您向我们展示的要多得多……）？
  • 您是否正确地从 App.js 导出（这似乎是此错误消息的一个很好的候选对象）？

至于您的 实际 问题，不，您没有错误地传递 props。语法的这一部分是正确的。

Kyle Baker
2016-04-20

这是 App.js 的完整版本吗？ 您应该使用类符号来使用 this.props。 如果您使用函数符号，则只需 props。

loveJS
2018-01-05