在React Native中使用Jest和Enzym进行单元测试

Question

如何找到带有笑话和酶的成分内部的元素？

假设我有1个父组件（登录）和2个子组件（标题和表单），因此在组件Login中，我想找到Form组件内是否有TextInput元素，或者Form Component内是否还有其他元素，开玩笑和酵素，那我怎样才能通过1个单元测试（Login.test.js）来获得它？

这是我的登录组件

<Login>
  <Title title='Login Page' />
  <Form 
     email={this.state.email}
     password={this.state.password}
  />
</Login>

标题成分

<Text>{this.props.title}</Text>

表单组件

<View>
  <TextInput value={this.props.email} placeHolder="Your Email" />
  <TextInput value={this.props.password} placeHolder="Your Password" />
</View>

这是我当前的Login.test.js

import React from 'react';
import { shallow } from 'enzyme';
import Login from './Login';
import renderer from 'react-test-renderer';

describe('Login', () => {
  const wrapper = shallow(<Login />);
  const instaceOf = wrapper.instance();

  it('renders correctly', () => {
    const rendered = renderer.create(<Login />).toJSON();
    expect(rendered).toBeTruthy();
  });

  it('should render the Text Input Element', () => {
    let form = wrapper.find('Form');
    expect(form.find('TextInput"]')).toHaveLength(2);
  });
});

Answer 1

当使用酶shallow方法时，您仅渲染组件的第一级。