React Native / Jest TypeError:无法读取未定义的属性'params'-使用Jest测试

时间:2018-11-09 01:58:14

标签: react-native jestjs react-native-navigation

我正在尝试在带有笑话的应用程序中创建测试,这是我的代码的几行:

import React, { Component } from 'react';
import {...} from 'react-native';
import jwt_decode from 'jwt-decode';

class CreateProduct extends Component {
constructor(props) {
  super(props);
  this.keyboardHeight = new Animated.Value(0);
  this.imageHeight = new Animated.Value(199);
  this.state = {
    isButtonsHidden: false,
    title: '',
    price: '',
    description: '',
    isDialogVisible: false,
    messageError: '',
  };
}

_goBack = async () => {
  const {state} = this.props.navigation;
  var token = state.params ? state.params.token : undefined;

  this.props.navigation.navigate('MyProducts', {token:token});
}

我要测试导航:

this.props.navigation.navigate('MyProducts', {token:token});

现在这是测试的尝试:

describe('Testing navigation', () =>{

  let wrapper = null
  const spyNavigate = jest.fn()
  const props = {
    navigation:{
        navigate: spyNavigate
    }
  }
  const params = {
      token: 'randomToken'
  }

  beforeEach(() => {
    wrapper = shallow(<CreateProduct {...props}/>)
    wrapper.setState({params: params})
  })

  it('should test navigation', () => {
  wrapper.instance()._goBack(params)
  expect(spyNavigate).toHaveBeenCalled()
  })
})

但是我收到this error

我假设我传递const params的方式有误。您能帮我告诉我模拟令牌的最佳方法是什么,以及在屏幕上进行导航的最佳方法吗?

谢谢。

1 个答案:

答案 0 :(得分:0)

根本原因是您的_goBackasync。但是您不必等到它结束后再运行expect。更重要的是:笑话也不会等待_goBack完成,所以您甚至都不会看到错误

  

无法读取未定义的属性“ params”

发生这种情况是因为您没有在state中嘲笑navigation.params

要使用异步代码,可以使用2 different approaches in Jest:从it()返回Promise或手动运行done()回调(在it()中作为第一个参数传递)。 / p>

我选择2nd是因为它使我们也可以等到goBack完成后再运行expect

describe('Testing navigation', () => {

  let wrapper = null
  const spyNavigate = jest.fn()
  const props = {
    navigation: {
      navigate: spyNavigate,
      state: {}
    }
  }
  const params = {
    token: 'randomToken'
  }

  beforeEach(() => {
    wrapper = shallow(<CreateProduct {...props} />)
    wrapper.setState({ params: params })
  })

  it('should test navigation', async () => {
    await wrapper.instance()._goBack(params)
    expect(spyNavigate).toHaveBeenCalled()
  })
})

或者不使用async/await看起来就像

  it('should test navigation', () => {
    return wrapper.
        instance()._goBack(params).
        then(() => expect(spyNavigate).toHaveBeenCalled());
  })

看起来很乱

或使用done()回调

  it('should test navigation', (done) => {
      wrapper.
        instance()._goBack(params).
        then(() => expect(spyNavigate).toHaveBeenCalled()).
        then(done);
  })