在模拟测试中使用模拟渲染组件

时间:2017-08-07 20:32:13

标签: react-native jest

背景

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

  

用户未定义。

所以我在组件中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:无法读取未定义的属性“value”

1 个答案:

答案 0 :(得分:0)

您正在尝试访问未定义的screenProps的属性用户。这里用户在你传递它时等于screenProps。你应该做的是将一个对象传递给一个属性用户的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
    }
};