在 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', () => ({&nbsp;&nbsp; 'alert': 'alert',&nbsp;&nbsp; 'type': 'info',&nbsp; // add the following line&nbsp; 'alert-info': 'info'}));