Reactjs 如何使用JEST、Ezyme测试React中的自定义钩子？

我有一个像下面这样的定制钩子

const useSum = (a = 1, b = 1) => {
  const [sum, setSum] = useState(a + b);

  useEffect(() => {
    setSum(a + b);
  }, [a, b]);

  return sum;
}

我在Functionat组件中使用了它

const MyFuncComp = () => {
  const sum = useSum(1, 2);
  return (
   <div>{sum}</div>
  );
}

constmyfuncomp=（）=>{
const sum=useSum（1,2）；
返回(
{sum}
);
}

在测试用例中，我有这样的

describe('Testing MyFuncComp', () => {
  const myFuncComp = mount(<MyFuncComp />);
  it('should have value of sum', () => {

    const expected = '3';
    const received = myFuncComp.find('div').text();
    expect(received).toEqual(expected);    
  });
})

description（'Testing myfuncomp'，（）=>{
常量myfuncomp=mount（）；
它（'应该有sum'的值，（）=>{
预期常数='3'；
const received=myfuncomp.find（'div'）.text（）；
预期（已收到）。toEqual（预期）；
});
})

它从不执行“useState”或“useffect”。收到的值总是“未定义”

我建议您使用：

另外，我认为您不需要酶或任何库来测试组件，您可以使用react-dom和react-dom/test-utils

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";
import MyFunComp from "./MyFunComp";

let container = null;

describe("Card component", () => {
  beforeEach(() => {
    // setup a DOM element as a render target
    container = document.createElement("div");
    document.body.appendChild(container);
  });

  afterEach(() => {
    // cleanup on exiting
    unmountComponentAtNode(container);
    container.remove();
    container = null;
  });

  it("Should render correctly", async () => {
    await act(async () => {
      render(<MyFunComp />, container);
    });
    const div = container.querySelector("div");
    expect(div).toBeTruthy();
    expect(div.textContent).toBe("123");
  });
});

从“React”导入React；
从“react dom”导入{render，unmountComponentAtNode}；
从“react dom/test utils”导入{act}；
从“/MyFunComp”导入MyFunComp；
让container=null；
描述（“卡组件”，（）=>{
在每个之前（（）=>{
//将DOM元素设置为渲染目标
容器=document.createElement（“div”）；
文件.正文.附件（容器）；
});
之后（（）=>{
//退出时的清理
卸载组件节点（容器）；
容器。移除（）；
container=null；
});
它（“应该正确呈现”，异步（）=>{
等待动作（异步（）=>{
渲染（，容器）；
});
const div=container.querySelector（“div”）；
expect（div.toBeTruthy（）；
expect（div.textContent）.toBe（“123”）；
});
});

我认为您的代码没有错。你能分享一个工作示例吗？如果你想测试自定义钩子，你可以使用@testing library/react hooks，如果“useState”和“useffect”没有被执行；由于它们没有被执行，“sum”总是“未定义的”。对我来说，它工作得很好（传递上面的代码，如果我使用

const expected='4'；

），react/react dom为16.12，enzyme为3.10；你可以检查一下你用的版本吗？就像我说的看起来不错。我刚复印粘贴，效果如期：。您可能需要再次检查您的测试环境以获得您的答复。但我必须使用“jest”和“enzyme”进行测试。好的，我理解，但您可以使用react dom测试您的组件，请参阅我的编辑：）我很抱歉，我无法使其易懂。问题是测试时未执行“useState”和“useEffect”。获取div的文本内容没有问题。请检查我的描述中的问题。您使用的是什么版本的酶和react？我理解您的问题，我的答案只是一个建议，我将尝试重现您的问题，但我需要知道酶和react的版本

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";
import MyFunComp from "./MyFunComp";

let container = null;

describe("Card component", () => {
  beforeEach(() => {
    // setup a DOM element as a render target
    container = document.createElement("div");
    document.body.appendChild(container);
  });

  afterEach(() => {
    // cleanup on exiting
    unmountComponentAtNode(container);
    container.remove();
    container = null;
  });

  it("Should render correctly", async () => {
    await act(async () => {
      render(<MyFunComp />, container);
    });
    const div = container.querySelector("div");
    expect(div).toBeTruthy();
    expect(div.textContent).toBe("123");
  });
});