jest TypeError: Cannot read property 'createRef' of undefined

Question

ImageSlider.tsx

const ImageSlider = (props: INF_ImageSlider) => {
    const [idx, setIdx] = useState(0);
    const imgRef = React.createRef<HTMLImageElement>(); // <---- Error here
    // ...
}

ImageSlider.test.tsx

test('Slide between images', () => {
    render(
        <ImageSlider imgUrls={['./img1', './img2']} alt='' />
    )
    // ...
}

开玩笑配置

"jest": {
    "transform": {
      "^.+\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|(\.|/)(test|spec))\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }

此组件使用了 createRef 挂钩，但当我尝试对其进行测试时，它抛出了错误 TypeError: Cannot read property 'createRef' of undefined，我该如何修复它？

Answer 1

我已经查看了有关使用和创建 ref 的文档，到目前为止，我发现它不能像您拥有的那样获取值...

你有什么

const imgRef = React.createRef<HTMLImageElement>();

我认为它会引发错误，因为您正试图挤入图像元素。

从文档中我看到的是

const imgRef = React.createRef()

下面是我将如何制作图片幻灯片。我对 Jest 和 React 不太了解，但如果我使用 React，我将如何处理它。

依赖关系

React-slideshow-image

安装指南：Found Here

NPM

npm 安装react-slideshow-image-S
纱线添加react-slideshow-image

从“react”导入 React，{ 组件}；
从“react-slideshow-image”导入{幻灯片}；

**如何将其放入不同的 js 文件中，然后将其导入到您的

主要App.js!**

export class Slideshows extends Component {
  constructor() {
    super();
    this.slideRef = React.createRef();
    this.previous = this.previous.bind(this);
    this.next = this.next.bind(this);
    this.state = {
      current: 0,
    };
  }

  previous() {
    this.slideRef.current.goBack();
  }

  next() {
    this.slideRef.current.goNext();
  }

  render() {
    const properties = {
      duration: 'time',
      autoplay: 'T/F',
      transitionDuration: 'time',
      arrows: 'True/False',
      infinite: 'True/False',
      easing: "Anytype of easing",
      indicators: (i) => <div className="indicators">{i + 1}</div>,
    };
    const slideImages = [
      "https://images.unsplash.com/photo-1509721434272-b79147e0e708?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80",
      "https://images.unsplash.com/photo-1506710507565-203b9f24669b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1536&q=80",
      "https://images.unsplash.com/photo-1536987333706-fc9adfb10d91?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80",
      "https://images.unsplash.com/photo-1444525873963-75d329ef9e1b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80",
    ];
    return (
      <div className="SlideShow">
        <h3>Sliding W/ React</h3>
        <div className="slide-container">
          <Slide ref={this.slideRef} {...properties}>
            {slideImages.map((each, index) => (
              <div key={index} className="each-slide">
                <img className="imgname?" src={each} alt="alt-text" />
              </div>
            ))}
          </Slide>
        </div>

        <div className="slide-container buttons">
          <button onClick={this.previous} type="button">
            Previous
          </button>
          <button onClick={this.next} type="button">
            Forward
          </button>
        </div>
      </div>
    );
  }
}

如何将其合并到主 app.js 文件中

class App extends Component {
    constructor() {
        super();
        this.slideRef = React.createRef();
        this.previous = this.previous.bind(this);
        this.next = this.next.bind(this);
        this.state = {
            current: 0
        };
    }

    previous() {
        this.slideRef.current.goBack();
    }
    next() {
        this.slideRef.current.goNext();
    }

    render() {
        const properties = {
            duration:,
            autoplay:,
            transitionDuration:,
            arrows:,
            infinite:,
            easing:,
            indicators: (i) => <div className="indicator">{i + 1}</div>
        };
        const slideImages = [
            "",
            "",
            "",
            "",
        ];
        return (
<div className="App">
        <h3>Sliding W/ react</h3>
        <div className="slide-container">
          <Slide ref={this.slideRef} {...properties}>
            {slideImages.map((each, index) => (
              <div key={index} className="each-slide">
                <img className="" src={each} alt="" />
              </div>
            ))}
          </Slide>
        </div>

        <div className="slide-container-btns">
          <button onClick={this.back} type="button">
            Previous
          </button>
          <button onClick={this.next} type="button">
            Foward
          </button>
        </div>
      </div>
    );
  }
}

export default App

Answer 2

必须区分 class 和功能组件。由于您使用钩子（仅适合功能组件）并使用“createRef”（仅适合 class 组件），您应该选择您的偏好。
为功能组件导入 useReact 钩子。
或者
为 class 组件创建状态。

jest TypeError: Cannot read property 'createRef' of undefined

jest TypeError: Cannot read property 'createRef' of undefined

reactjs

jestjs

react-testing-library

依赖关系

React-slideshow-image

**如何将其放入不同的 js 文件中，然后将其导入到您的

主要App.js!**

如何将其合并到主 app.js 文件中