首页 文章

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

提问于
浏览 次
1

我正在尝试为使用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();
  });
});
reactjs jestjs uuid

1 回答

  • 4

    问题是在导入要测试的模块后模拟模块 . 因此导入的模块具有导入的原始版本 uuid/v1 . 然后你模拟 uuid/v1 但这对 MyComponent 没有影响，因为它已经有了对原始版本的引用 .

    当在测试的最外部块中使用 jest.mock 时，它将被提升到模块的顶部，因此在将其导入 MyComponent 之前，jest将模拟 uuid/v1 ，这就是为什么它在这种情况下有效

    回复于

相关问题