Javascript 笑话：无法设置属性'；道具'；未定义的

我开始学习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>
);

const{store}=this.props；
返回(
欢迎来到{store.name}项目！
此项目为{store.description}。
);

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

const storeProp={
名称：“Reaxor”，
描述：“你好”
}
描述（'App'，（）=>{
它（'返回正确的文本'，（）=>{
//在文档中呈现带有标签的复选框
const app=TestUtils.renderIntoDocument(
);
const appNode=ReactDOM.findDOMNode（app）；
const h2=TestUtils.findrenderedomcomponentwithtag（应用程序“h2”）
const h3=TestUtils.findRenderedomComponentWithTag（应用程序“h3”）
expect（h2.textContent）.toEqual（“欢迎来到Reaxor项目！”）；
expect（h3.textContent）.toEqual（'这个项目是Hello'）
});
});

不幸的是，我还不能添加注释，但我想添加注释：行号会有帮助（或者更好，堆栈跟踪）。是吗

const-app=TestUtils.renderIntoDocument(
);

这就是错误

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

React在内部创建一个作为对象的“props”参数，并将这些道具作为参数粘贴到该对象上。它试图在未定义的东西上这样做。这可能表明您在使用

时出现了问题

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

---

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

不幸的是，我还不能添加注释，但我想添加注释：行号会有帮助（或者更好，堆栈跟踪）。是吗

const-app=TestUtils.renderIntoDocument(
);

这就是错误

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

React在内部创建一个作为对象的“props”参数，并将这些道具作为参数粘贴到该对象上。它试图在未定义的东西上这样做。这可能表明您在使用

时出现了问题

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

---

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

在我看来，有些东西被模仿了，不应该被模仿。您可以尝试在配置中禁用automock

“automock”：false

，看看该模型是否更适合您：）

在我看来，有些东西被模拟了，不应该被模拟。您可以尝试在配置中禁用automock

“automock”：false

，看看该模型是否更适合您：）

它是App.js的完整版本吗？ 您应该使用类表示法来使用this.props。

---

如果使用函数表示法，只需道具。

它是App.js的完整版本吗？ 您应该使用类表示法来使用this.props。

---

如果您使用函数表示法，只需使用道具。

这是App.js:这是测试文件：错误：在App（src/components/App/App.js:10:245）我认为测试没有正确通过道具，因此This.props未定义。它不是说

This.props

未定义，而是说

This

（或者，当它使用魔法来访问这个.props时，试图在内部分配给它的任何道具）是未定义的。您正在使用一些奇特的ES6功能进行导入，但我没有太多使用，因此我会更仔细地检查这些功能。但您确实正确地传递了道具。我在我的jest文件中也这样做。以下是我如何使用这些功能的示例：这是App.js:这是测试文件：错误：at App（src/components/App/App.js:10:245）我认为测试没有正确地通过道具，因此this.props是未定义的。它不是说

this.props

未定义，而是说

this

（或者任何道具试图在内部分配给它，同时它发挥了神奇的作用来访问这个.props）是未定义的。您正在使用一些奇特的ES6功能进行导入，但我没有使用太多，因此我会更仔细地检查这些功能。但您确实正确地传递了道具。我在jest文件中也这样做。以下是我如何使用这些功能的示例：

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