Javascript 如何使用react测试库在react组件上测试条件呈现？

这就是我要测试的组件：

export const Profile: FC<Props> = props => {
  const { navigation, profileDetails, fetchProfileDetails } = props;

  useEffect(() => {
    !profileDetails && fetchProfileDetails();
  }, []);

  return (
    <ScrollView>
      {get(profileDetails, 'error') ? (
        <Error message={get(profileDetails, 'message') || 'Unknown Error'} />
      ) : (
        <UserContainer navigation={navigation} userDetails={profileDetails} />
      )}
    </ScrollView>
  );
};

这就是

测试的快照呈现错误的方式：

exports[`Profile Scene renders error 1`] = `
<ScrollViewMock>
  <UserContainer
    navigation={
      Object {
        "getParam": [Function],
      }
    }
    userDetails={
      Object {
        "profileDetails": Object {
          "error": "test error",
        },
      }
    }
  />
</ScrollViewMock>
`;

导出[`Profile Scene renders error 1`]=`
`;

那么，这是测试这类事情的正确方法还是有更好的方法？
您应该分别测试这两种情况。
一个用于错误容器，一个用于用户容器

import React from 'react';
import { Profile } from './Profile';
import { shallowRender } from '../../shared/services/testHelper';

const mockNavigation: any = { getParam: () => undefined };

describe('Profile Scene', () => {
  it('renders error', () => {
    const mockError: any = { profileDetails: { error: 'test error', message: 'test error' } };
    const tree = shallowRender(<Profile profileDetails={mockError} navigation={mockNavigation} />);
    expect(wrapper.find(Error).exists()).to.equal(true);
    expect(wrapper.find(UserContainer).exists()).to.equal(false);
  });

  it('renders naviagtion', () => {
    const mockError: any = { profileDetails: { error: null, message: '' } };
    const tree = shallowRender(<Profile profileDetails={mockError} navigation={mockNavigation} />);
    expect(wrapper.find(Error).exists()).to.equal(false);
    expect(wrapper.find(UserContainer).exists()).to.equal(true);
  });
});

从“React”导入React；
从“/Profile”导入{Profile}；
从“../../shared/services/testHelper”导入{shallwrender}；
const mockNavigation:any={getParam:（）=>undefined}；
描述（'情景简介'，（）=>{
它（'呈现错误'，（）=>{
const mockError:any={profileDetails:{error:'testerror'，message:'testerror'}；
const tree=shallowRender（）；
expect（wrapper.find（Error）.exists（））.to.equal（true）；
expect（wrapper.find（UserContainer.exists（））.to.equal（false）；
});
它（'呈现导航'，（）=>{
const mockError:any={profileDetails:{error:null，消息：“”}；
const tree=shallowRender（）；
expect（wrapper.find（Error）.exists（））.to.equal（false）；
expect（wrapper.find（UserContainer.exists（））.to.equal（true）；
});
});
您应该分别测试这两种情况。
一个用于错误容器，一个用于用户容器

import React from 'react';
import { Profile } from './Profile';
import { shallowRender } from '../../shared/services/testHelper';

const mockNavigation: any = { getParam: () => undefined };

describe('Profile Scene', () => {
  it('renders error', () => {
    const mockError: any = { profileDetails: { error: 'test error', message: 'test error' } };
    const tree = shallowRender(<Profile profileDetails={mockError} navigation={mockNavigation} />);
    expect(wrapper.find(Error).exists()).to.equal(true);
    expect(wrapper.find(UserContainer).exists()).to.equal(false);
  });

  it('renders naviagtion', () => {
    const mockError: any = { profileDetails: { error: null, message: '' } };
    const tree = shallowRender(<Profile profileDetails={mockError} navigation={mockNavigation} />);
    expect(wrapper.find(Error).exists()).to.equal(false);
    expect(wrapper.find(UserContainer).exists()).to.equal(true);
  });
});

从“React”导入React；
从“/Profile”导入{Profile}；
从“../../shared/services/testHelper”导入{shallwrender}；
const mockNavigation:any={getParam:（）=>undefined}；
描述（'情景简介'，（）=>{
它（'呈现错误'，（）=>{
const mockError:any={profileDetails:{error:'testerror'，message:'testerror'}；
const tree=shallowRender（）；
expect（wrapper.find（Error）.exists（））.to.equal（true）；
expect（wrapper.find（UserContainer.exists（））.to.equal（false）；
});
它（'呈现导航'，（）=>{
const mockError:any={profileDetails:{error:null，消息：“”}；
const tree=shallowRender（）；
expect（wrapper.find（Error）.exists（））.to.equal（false）；
expect（wrapper.find（UserContainer.exists（））.to.equal（true）；
});
});