Identity-obj-proxy 在 Jest 中不工作 - JavaScript

问题描述

当尝试在 Jest 测试中使用 identity-obj-proxy 时，发现无法正确引用模拟对象，并且测试失败。我们的测试代码看起来像这样：

import jestMock from 'jest-mock';
import styles from '../styles.module.scss';

jest.mock('../styles.module.scss', () => ({
  ...jestMock.genMockFromModule('../styles.module.scss'),
  default: jestMock.fn(() => 'mockedStyles'),
}));

describe('TestComponent', () => {
  it('should render correctly', () => {
    // some test code
    expect(wrapper.find(`.${styles.container}`)).toHaveLength(1);
    // some more test code
  });
});

通过使用 identity-obj-proxy 模块，我们可以在测试代码中引用 CSS 模块，并将其作为常规的对象来处理。然后，当我们在测试代码中访问 styles.container 时，我们将得到一个指向 'container' 的字符串。但是，在这个案例中，我们得到了一个 undefined，测试失败。

原因分析

该问题的原因在于 identity-obj-proxy 模块似乎无法在 Jest 中正确工作。

解决方案

为了解决这个问题，我们可以手动创建一个模拟 CSS 模块来代替 identity-obj-proxy 模块。我们可以使用 jest.mock() 方法来模拟模块，并将其导出对象的所有属性设置为 jest.fn(() => '')。

jest.mock('../styles.module.scss', () => {
  return {
    __esModule: true,
    default: '',
    container: '',
    otherClass: '',
    // ...
  };
});

现在，我们可以在测试代码中引用模拟模块，并在测试代码中正常访问其属性。

import styles from '../styles.module.scss';

describe('TestComponent', () => {
  it('should render correctly', () => {
    // some test code
    expect(wrapper.find(`.${styles.container}`)).toHaveLength(1);
    // some more test code
  });
});

结论

虽然 identity-obj-proxy 看起来是一个非常有用的模块，但在 Jest 中使用它可能会导致测试失败。为了解决这个问题，我们可以手动创建模拟 CSS 模块，在测试代码中使用它来代替 identity-obj-proxy 模块。