通过反应进行测试

Question

我正在使用带Jest的酶，并且我有此组件，其中包括一个navigate方法：

export class LeadList extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <List>
        {this.props.data.allLeads.map((lead, i) => {
          return (
            <ListItem
              key={i}
              onPress={() =>
                navigate('Details', lead.id)
              }
            />
            // ...
            </ListItem>
          )})}
      </List>
    );
  }
}

我正在尝试测试它被正确调用，所以我将其扔在一起：

const testProps = props => ({
  data: {
    allLeads: [
      {id: 1, name: 'John Doe'},
      {id: 2, name: 'Jane Doe'}
    ],
    loading: false,
  },
  navigation: jest.fn((options, callback) => callback('Details', 1)),
  ...props,
})
describe('interactions', () => {
  let props
  let wrapper
  beforeEach(() => {
    props = testProps()
    wrapper = shallow(<LeadList {...props} />)
  })
  describe('clicking a lead', () => {
    beforeEach(() => {
      wrapper.find(ListItem).first().prop('onPress')
    })
    it('should call the navigation callback', () => {
      expect(props.navigation).toHaveBeenCalledTimes(1)
    })
  })
})

输出是：

Expected mock function to have been called one time, but it was called zero times.

处理此问题的正确方法是什么？我需要使用间谍吗？

编辑：

当我像这样更改时，我会得到同样的事情：

const testProps = props => ({
  // ...
  navigation: {navigate: jest.fn()},
  ...props,
})
it('should call the navigation callback', () => {
  expect(props.navigation.navigate).toHaveBeenCalledTimes(1)
})

输出：

expect(jest.fn()).toHaveBeenCalledTimes(1)
Expected mock function to have been called one time, but it was called zero times.
  at Object.<anonymous> (__tests__/LeadList-test.js:48:35)
  at tryCallTwo (node_modules/promise/lib/core.js:45:5)
  at doResolve (node_modules/promise/lib/core.js:200:13)
  at new Promise (node_modules/promise/lib/core.js:66:3)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
  at tryCallOne (node_modules/promise/lib/core.js:37:12)
  at node_modules/promise/lib/core.js:123:15

Answer 1

您将需要间谍来测试。这是一个示例测试，用于查找LoginScreen上的ForgotPassword按钮并测试它导航到正确的屏幕。

test('Press Forgot Password Button', () => {
  const spy = jest.spyOn(navigation, 'navigate')
  const wrapper = shallow(
    <LoginScreen
      navigation={navigation}
      error={{}}
      onLogin={jest.fn()}
    />,
  )
  const forgotButton = wrapper.find('Button').at(0)
  forgotButton.props().onPress()
  expect(spy).toBeCalledWith('ForgotPassword')
})

Answer 2

传递给组件的prop navigation不是函数。这是一个包含称为navigate的函数的对象。具有讽刺意味的是，这正是您在组件代码中使用的内容：

const { navigate } = this.props.navigation;

因此，您必须更改您从测试中传递的导航道具为：

navigation: {navigate: jest.fn()}

然后在您的测试中：

expect(props.navigation.navigate).toHaveBeenCalledTimes(1)

编辑：

为了实际获取函数，您必须模拟按下。现在，代码找到onPress函数，但没有调用。

为此，您可以替换

wrapper.find(ListItem).first().prop('onPress')

wrapper.find(ListItem).first().props().onPress()