在 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>`;所以，我不确定我在这里遗漏了什么，或者是否对字符串连接有任何限制。我怎样才能正确得到它？谢谢！

Answer 1

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

jest.mock('./Alert.module.scss', () => ({ 

  'alert': 'alert', 

  'type': 'info',

  // add the following line

  'alert-info': 'info'

}));