在 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为true但似乎找不到类名时，检查类名是否存在。。我想知道这是不是因为css选择器"styles"？

Answer 1

您可以在expect语句之前尝试console.log(component.find('p').debug())，以了解样式在测试中的具体显示方式。然后，您应该能够在expect中查看要查找的选择器。

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

样式.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)