如何编写Material UI滑块的单元测试？尝试渲染组件时抛出“错误：无法读取属性'addEventListener'为null”

问题描述

尝试使用Reat-Test-Renderer测试Material-UI滑块会出现错误：Uncaught [TypeError: Cannot read property 'addEventListener' of null]

Codesandbox Link

import React from "react";
import { Slider } from "@material-ui/core";
import renderer from "react-test-renderer";

it("should render",() => {
  renderer.create(<Slider />);
});

对于我所知道的任何其他Material UI组件，情况并非如此。

它似乎与here中所述的forwardRef有关，但我想不出一种使它工作的方法。

编辑不幸的是，我正在从事的这个项目无法切换到@testing-library/react。

编辑2 之所以这样做，是因为我试图渲染和测试我自己的包含Slider的更复杂的组件。我花了一段时间才弄清楚这是问题的根源，上面的代码是复制问题的最少代码。

编辑3 错误消息的屏幕截图

解决方法

React Test Renderer仅将组件呈现为JS对象，而不呈现给浏览器环境。因此，任何使用基于dom的引用的东西都会出现此问题。相关开玩笑的问题：https://github.com/facebook/jest/issues/5462。

React Docs中有一个部分解决该问题：https://reactjs.org/docs/test-renderer.html#ideas

编辑：

这是一个工作测试。由于我们将内部引用设置为null，因此可能会使滑块的许多功能无法正常工作。但是它确实可以运行。 MUI上的“下一步”分支那里没有findDOMNode函数，因此使用起来可能会更容易。

我无法在CodeSandbox上使用它们，因为jest是未定义的，而且我找不到解决方法。

import React from 'react';
import { Slider } from '@material-ui/core';
import renderer from 'react-test-renderer';

jest.mock('react-dom',() => ({
  // the useIsFocusVisible function in Slider.js (MUI component) uses findDOMNOde
  // Luckily it checks if there's nulls,so we can return a null
  // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/utils/useIsFocusVisible.js#L136
  findDOMNode: () => null,}));
it('should render',() => {
  renderer.create(<Slider />);
});

如果要尝试模拟全部功能（某种），可以使用findDOMNode模拟的此实现，该实现将返回useIsFocusVisible成功运行所需的值，包括添加事件听众：

import React from 'react';
import { Slider } from '@material-ui/core';
import renderer from 'react-test-renderer';

jest.mock('react-dom',() => ({
  // the useIsFocusVisible function in Slider.js (MUI component) uses findDOMNOde
  // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/utils/useIsFocusVisible.js#L136
  findDOMNode: (instance) => {
    return { ownerDocument: instance };
  },() => {
  let eventListenerFn = jest.fn();
  renderer.create(<Slider />,{
    createNodeMock: (element) => {
      if (element.type === 'span') {
        return {
          addEventListener: eventListenerFn,};
      }
    },});
});

为了弄清楚如何使这些测试成功运行，我必须逐步遍历错误堆栈/ MUI源代码，以找出出了什么问题以及需要模拟哪些值才能不引发错误。

---

原始内容，显示@ testing-library对此有何改善：

但是，我可以建议使用@testing-library吗？很好用，并使用jsdom呈现组件，因此可以与此组件一起使用。

我继续使用测试库对Slider进行了一些随机测试，以表明它可以与Slider配合使用并且不会引发任何错误：

import React from "react";
import { Slider } from "@material-ui/core";
import { render } from "@testing-library/react";

it("should render",() => {
  render(<Slider />);
});

it("should render an input",() => {
  const component = render(<Slider />);
  const input = component.baseElement.querySelector("input");
  expect(input).toBeDefined();
});

it("Should have the correct value",() => {
  const component = render(<Slider value={50} />);
  const input = component.baseElement.querySelector("input");
  expect(input.value).toBe("50");
});

CodeSandbox