Jest快照测试具有随机生成的ID（UUID）的React组件

Question

我正在尝试为使用uuid生成唯一ID的React组件创建开玩笑的快照测试。我正在尝试模拟uuid功能。但是嘲笑似乎没有用。

零件：

import React from 'react';
import v1 from 'uuid/v1';

class MyComponent extends React.Component {
  // Other codes ...

  render() {
    const id = v1();
    return (
      <div>
        <label htmlFor={id}>
          <input type="checkbox"/>  
        </label>
      </div>
    )
  }
}

export default MyComponent;

测试：

import React from 'react';
import renderer from 'react-test-renderer';
import MyComponent from './MyComponent';

describe('<MyComponent/>', () => {
  it('renders correctly', () => {
    jest.mock('uuid/v1', () => jest.fn(() => 1));
    const tree = renderer.create(<Checkbox />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

Answer 1

问题是您在导入要测试的模块后对模块进行了模拟。因此，导入的模块具有导入的原始版本uuid/v1。然后您进行模拟，uuid/v1但这不会起作用，MyComponent因为它已经具有对原始版本的引用。

在jest.mock测试的最外层块中使用时，它将被提升到模块的顶部，因此uuid/v1在将其导入之前，将进行开玩笑的模拟，这MyComponent就是这种情况的原因