Question

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

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

TypeError：无法设置未定义的属性'props'

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>
);

应用-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.')
  });
});

Answer 1

在我看来，有些东西被嘲笑，不应该被嘲笑。您可以尝试在配置中禁用自动插锁"automock": false，看看该模型是否适合您：）

Answer 2

不幸的是，我还无法添加评论，但我想评论一下：行号有助于（甚至更好的是堆栈跟踪）。是吗

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

发生了错误？

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

React内部创建了一个＆＃39;道具＆＃39;作为对象的参数，并将道具作为参数粘贴在它上面。它试图将这样做放在未定义的东西上。这表明你如何进入<App />会出现问题。

您是否在测试文件中要求App.js？
你确定开玩笑不是在嘲笑吗？（对于所有必需的文件，它在某些版本中默认执行此操作。）
App.js是否写得正确（我希望那个档案中的内容比你向我们展示的更多......）？
您是否正确地从App.js导出（这似乎是此错误消息的良好候选者）？

至于你的实际问题，不，你没有错误地传递道具。那部分语法是正确的。

Answer 3

它是App.js的完整版本吗？您应该使用类表示法来使用this.props。如果你使用函数表示法，只需要道具。

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

3 个答案: