Question

这就是我要测试的组件：

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>
  );
};

您可能会看到有Error和UserContainer两个组件。

这是我的测试

import React from 'react';
import { dummyUserInfo } from '../../shared/models/UserInfo.model';
import { Profile } from './Profile';
import { shallowRender } from '../../shared/services/testHelper';

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

const mockError: any = { profileDetails: { error: 'test error' } };

describe('Profile Scene', () => {
  it('renders error', () => {
    const tree = shallowRender(<Profile profileDetails={mockError} navigation={mockNavigation} />);
    expect(tree).toMatchSnapshot();
  });
});

这是renders error测试的快照的外观：

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

那是测试这种事情的正确方法还是有更好的方法？

Answer 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 testing lib测试React组件上的条件渲染？

1 个答案: