0

我正在使用 React 测试库为以下组件编写测试。当我检查测试覆盖率时，它告诉我传递给道具'errorRender'的函数的覆盖率没有被覆盖。

下面是我的组件：

import React from 'react'; 
import Icon from './Icon';
import Image from './Image';

function Container(props) {
  const {img, caption} = props;

  return (
    <figure>
      <div>
        <Image
          img={img}
          errorRender={() => (
            <div>
              <div>
                <Icon/>
              </div>
            </div>
          )}
        />
      </div>
  {caption && (
    <figcaption>{caption}</figcaption>
  )}
    </figure>
  );
}

export default Container;

我如何测试传递给 errorRender 道具的函数？我正在考虑避免测试子组件“图像”，因为它将单独测试，但是放弃它并没有给我 100% 的测试覆盖率，这在我们的项目中是必需的。

我在测试文件中模拟了“图像”子组件，如下所示：

jest.mock('./Image', () => {
    return function Image() { 
        return <div> Image </div>
        
    };
});

然后这样做：

jest.mock('./Image', () => {
    return function Image({errorRender}) { 
        errorRender();  
        return <div> Image </div>
        
    };
});

虽然上面的嘲笑给了我 100% 的测试覆盖率，但是对 React 测试来说是新手，我不确定这样做是否正确？我们应该在父组件测试文件中测试传递给子组件的值吗？正确的方法应该是什么？

4

0 回答 0