Question

我正在尝试使用酶测试本机应用程序：

import React from 'react';
import { View, Text, TouchableWithoutFeedback, TouchableOpacity, ImageBackground, Image, TextInput, Platform, ScrollView} from 'react-native'
import { shallow, mount } from 'enzyme';
import LoginForm from '../LoginForm.js';
import Root from '../../Root.js'
import StylishInput from '../common/StylishInput';


it('shows a login form', () => {
  const wrapped = shallow(<Root><LoginForm /></Root>);
  console.log(wrapped)
  const componentInstance = wrapped.instance();
  componentInstance.componentWillMount();
  expect(wrapped.find(StylishInput).length).toEqual(2);
  expect(wrapped.find(TextInput).length).toEqual(2);
})

但是，包装的内容始终为空，componentInstance为null。我不明白，因为LoginForm确实存在，并且Root是我创建的用于将经过测试的组件包装在provider中的组件。如果需要，这里是所有项目的链接： https://github.com/davidgeismar/timeo-mobile/blob/enzyme/src/components/tests/LoginForm.test.js

Answer 1

我希望看到您的根看起来更准确，但这是一个猜测。

//Try something like this. I dont know how you root looks like, but im making a few guesses.
it('shows a login form', () => {
  //try shallowing it like this with props if you have any. I am guessing that Loginform is inside of you Root
  const wrapped = shallow(<Root {...props}/>);
  console.log(wrapped)
  const componentInstance = wrapped.instance();
  //do not use componentWillMount as it is deprecated use componentDidMount instead
  componentInstance.componentDidMount();
  expect(wrapped.find(LoginForm).length).toEqual(1);
  expect(wrapped.find(TextInput).length).toEqual(2);
})

浅渲染器吐出空的本机组件

1 个答案: