React Native/Jest TypeError：无法读取未定义的属性“参数” - 用玩笑进行测试

Question

我正在尝试用 jest 在应用程序中创建一个测试，这是我的一些代码行：

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 的方式有误。你能帮我告诉我模拟令牌以及在屏幕中导航的最佳方式是什么吗？

谢谢。

Answer 1

根本原因是您的_goBack 是async。但是在运行expect 之前不要等到它结束。更重要的是：jest 也不会等待 _goBack 完成，所以你甚至看不到错误

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

这是因为您没有在 navigation.params 中模拟 state。

要使用异步代码，有 2 different approaches in Jest：要么从 it() 返回 Promise，要么手动运行 done() 回调（它作为 it() 中的第一个参数传递）。

我会选择第二个，因为它允许我们在运行 expect 之前等待直到 goBack 完成：

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