在Jest测试快照上返回未定义的字符串串联

Question

我有以下反应成分

import styles from './Alert.module.scss';
const Alert = ({
role = 'document',
type = 'info',
}) => (
<GridItem>
<div className={`${styles.alert} ${styles[`alert-${type}`]}`} role={role}>
{icon && <div className={`${styles['alert-icon']}`} />}
<div className={styles.content}>{children}</div>
</div>
</GridItem>

我正在写这样的测试

jest.mock('./Alert.module.scss', () => ({ 
'alert': 'alert', 
'type': 'info',
}));
jest.mock('./GridItem', () => 'GridItem');
describe('Alert', () => {
it('should render correctly', () => {
expect(renderer.create(<Alert>Alert</Alert>)).toMatchSnapshot();
});
});

问题是，在创建快照时，类型变量返回未定义。我认为这与字符串连接有关；角色；变量写入正确。

这是快照。

<GridItem>
<div
className="alert undefined"
role="document"
>
<div>
Alert
</div>
</div>
</GridItem>
`;

所以，我不确定我在这里遗漏了什么，或者字符串concat是否有任何限制。我怎样才能得到正确的答案？谢谢

Answer 1

您在type变量前面加了alert-，但它似乎不存在于模拟的styles对象上。所以你可以尝试添加

jest.mock('./Alert.module.scss', () => ({ 
'alert': 'alert', 
'type': 'info',
// add the following line
'alert-info': 'info'
}));