Question

我正在尝试为使用uuid生成唯一ID的React组件创建jest快照测试。我试图嘲笑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时，它会被提升到模块顶部，因此jest会先模拟uuid/v1，然后才能将其导入MyComponent这就是为什么它适用于这种情况

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

1 个答案: