Question

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

比方说，我有1个父组件（登录）和2个子组件（标题和表单），所以在组件Login中，我想找到Form组件内是否有TextInput元素，或者Form Component内还有其他元素，用开玩笑和酵素，那么如何仅通过1个单元测试（Login.test.js）就可以做到这一点？

这是我的illogration登录组件

<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

使用酶differences in how the shader model 5 and below and how the shader model 6 compilers方法时，您仅呈现组件的第一级。

因此，声明：

$(document).ready(function(e) {
 this.myFunction();
}

仅呈现myFunction = () => { alert("Jquery is ready!"); }和const wrapper = shallow(<Login />);组件，而不呈现其子组件。

如果要渲染所有组件树，则应改用shallow。就是说，对Title组件的测试应仅测试其第一个子级。如果要测试Form组件是否呈现两个Login组件，则应在属于Form组件的单元测试中进行此操作（不在TextInput组件中）。

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

1 个答案: