使用 Mocks 在 Jest 测试中渲染组件

Question

背景

我正在为我们正在编写的 React Native 应用程序编写一些有趣的测试。在一个组件中，我收到了一个错误，

用户未定义。

所以我在组件中console.log(user) 并得到了输出。然后创建了user 的模拟。

用户

module.exports = {
    id: 'ABCDERD',
    name: 'Boss Ninja',
    language: 'en',
};

在组件中抛出错误的行是这样的，

  const languageName = _.findWhere(languages, { key: this.props.screenProps.user.get('language') }).value;

因此，一旦我创建了模拟 user，错误就清除了，但随后我得到了这个错误，

TypeError: 无法读取未定义的属性“get”

我在这里假设我需要为get() 创建一个模拟。但 。我不知道怎么称呼它。如果有人愿意告诉我如何处理为此组件编写测试以使其呈现，我将不胜感激。

这就是我想要做的，

const tree = renderer.create(
    <ProfileScreen screenProps={user} />
);

如何清除get()未定义的错误？

示例

用户对象

module.exports = {
    id: '0052C000000gFJrQAM',
    name: 'My Name',
    language: 'en',
    get: language => language,
    value: 'English (US)',
};

测试

const tree = renderer.create(
        <ProfileScreen screenProps={{ user }} />
  );

错误

TypeError: 无法读取未定义的属性“值”

Answer 1

您正在尝试访问未定义的 screenProps 属性用户。这里 user 等于你传递的 screenProps 。您应该做的是使用属性 user 将对象传递给 screenProps，因为您在代码中调用 screenProps.user。

const tree = renderer.create(
    <ProfileScreen screenProps={{ user: userMock }} />
);

然后您应该将 get 方法添加到您的对象用户。你可以为你的 get 方法返回任何你想要的东西。

userMock.get = (language) => { 
    return language;
}

或者在你的情况下

module.exports = {
    id: '0052C000000gFJrQAM',
    name: 'my name',
    language: 'en',
    get: (language) => {
       return language
    }
};