在 React 中测试子组件的条件渲染 Jest/Enzyme

Question

我正在尝试为此文件添加更多测试：

import React, { useContext } from 'react';
import UserContext from '../../contexts/user';
import styles from './index-styles.scss';

const UserLogo = ({ isMember }) =>
  isMember ? (
    <div className={styles.memberLogo}>&nbsp;</div>
  ) : (
    <div className={styles.logo}>&nbsp;</div>
  );

const UserDesc = ({ isMember }) => {

  return isMember ? (
    <p className={styles.memberDesc}>Hi Member!</p>
  ) : (
    <p>Make An Account Today!</p>
  );
};

function UserCard() {
  const user = useContext(UserContext);
  const userLink = 'www.google.com';

  // check compatibility
  const isCompatible = user.formats?.some(format => format === 'verified');
  const isMember =
    user.info && user.info[0].accountData?.data?.type === 'member';
  if (!isCompatible || user.language !== 'en') {
    return null;
  }

  return (
    <div className={styles.userCard}>
      <div className={styles.title}>Welcome!</div>
      <UserLogo isMember={isMember} />
      <UserDesc isMember={isMember} />
      <a
        className={styles.userLink}
        href={userLink}
      >
        Click Here!
      </a>
    </div>
  );
}

export default UserCard;

目前我有这些测试：

import React from 'react';
import { mount } from 'enzyme';
import UserCard from '.';
import UserDesc from '.';
import { UserProvider } from '../../contexts/user';

function UserCardWithUser(props) {
  const user = {
    id: '12345',
  };

  return (
    <UserProvider value={{ ...buzz, ...(props.buzz || {}) }}>
      <UserCard />
    </UserProvider>
  );
}

jest.mock('react', () => {
  return {
    ...jest.requireActual('react'),
    useContext: jest.fn(),
  };
});

describe('user card', () => {
  beforeEach(async () => {
    jest.resetAllMocks();
    React.useContext.mockReturnValue({
      getExperimentValue: jest.fn().mockReturnValue('control'),
    });
  });

  it('should render on eligable user', () => {
    const user = {
      formats: ['verified'],
      info: [
        {
          accountData: {
            data: {
              type: 'member',
            },
          },
        },
      ],
      language: 'en'
    };
    const component = mount(<UserCardWithUser user={user} />);
    component.update();
    expect(component.find('UserCard').exists()).toBe(true);
  });

  it('should not render when user is ineligible', () => {
    const userParts = [
      {
        bfpFormats: ['na'],
        formats: [
          {
            accountData: {
              data: {
                type: 'member',
              },
            },
          },
        ],
        language: 'en'
      },
    ];

    for (const userPart of userParts) {
      const component = mount(<UserCardWithUser user={userParts} />);
      component.update();
      expect(component.isEmptyRender()).toBe(true);
    }
  });
});

但是我希望能够测试 UserLogo 和 UserDesc 中涉及的条件呈现。我试过这个：

 const isMember = true;
    const component = mount(<UserDesc isMember={isMember}/>);
    expect(component.exists('.memberDesc')).toBe(true);

当 isMember 为真时检查类名是否存在，但它似乎没有找到类名。我想知道这是否是因为 css 选择器 'styles.'？

Answer 1

您可以在 expect 语句之前尝试 console.log(component.find('p').debug()) 以准确查看样式在测试中的显示方式。然后您应该能够在 expect.

中看到要查找的选择器

我无法以与您相同的方式导入 .scss 文件，但这是我的测试文件和输出。

Style.test.tsx

import React, { FC } from 'react';
import { mount } from 'enzyme';
import '../styles/index-styles.scss';

const UserDesc: FC<{ isMember: boolean }> = ({ isMember }) => {
    return isMember ? <p className={'memberDesc'}>Hi Member!</p> : <p>Make An Account Today!</p>;
};

test('UserDesc renders with style if true', () => {
    const isMember = true;
    const component = mount(<UserDesc isMember={isMember} />);
    console.log(component.find('p').debug());
    expect(component.find('.memberDesc')).toHaveLength(1);
});

test('UserDesc does not render with style if false', () => {
    const isMember = false;
    const component = mount(<UserDesc isMember={isMember} />);
    console.log(component.find('p').debug());
    expect(component.find('.memberDesc')).toHaveLength(0);
});

输出

PASS  src/__test__/ClassTest.test.tsx
 ● Console

console.log
  <p className="memberDesc">
    Hi Member!
  </p>

  at Object.<anonymous> (src/__test__/ClassTest.test.tsx:12:13)

console.log
  <p>
    Make An Account Today!
  </p>

  at Object.<anonymous> (src/__test__/ClassTest.test.tsx:19:13)

在 React 中测试子组件的条件渲染 Jest/Enzyme

Testing a child component's conditional rendering in React Jest/Enzyme

javascript

unit-testing

reactjs

jestjs

enzyme