如何使用Typescript将jest.spyOn与React函数组件一起使用 [英] How to use jest.spyOn with React function component using Typescript

问题描述

我正在使用Typescript和钩子开发React应用程序，并且我尝试将Enzyme与Jest一起使用以测试功能组件.我无法使用jest.spyOn来测试组件中的方法. jest.spyOn方法无法正确解析，并在悬停时显示以下消息

I am developing a React app using Typescript, and hooks, and I am trying to use Enzyme with Jest to test the function components. I am unable to use jest.spyOn to test a method in my component. The jest.spyOn method doesn't resolve correctly and shows following message on hover

类型'"validateBeforeSave"的参数不能分配给 '"context"类型的参数| "setState" | "forceUpdate" | 渲染" | "componentDidMount" | "shouldComponentUpdate" | "componentWillUnmount" | "componentDidCatch" | "getSnapshotBeforeUpdate" | ... 6更多... | "UNSAFE_componentWillUpdate"'.ts(2345)"

"Argument of type '"validateBeforeSave"' is not assignable to parameter of type '"context" | "setState" | "forceUpdate" | "render" | "componentDidMount" | "shouldComponentUpdate" | "componentWillUnmount" | "componentDidCatch" | "getSnapshotBeforeUpdate" | ... 6 more ... | "UNSAFE_componentWillUpdate"'.ts(2345)"

我试图将实例强制转换为'Any'-

I tried to cast the instance as 'Any' -

const instance = wrapper.instance() as any;

这当然会忽略编译时的问题，但是测试会抛出运行时错误，提示该功能在组件上不存在.

This of course ignores the problem at compile time, but then the test throws a runtime error that function does not exist on component.

无法监视validateBeforeSave属性，因为它不是一个 功能;未给定

Cannot spy the validateBeforeSave property because it is not a function; undefined given instead

// Some function Component

const SomeComponent = (props: IMyComponentProps) => {
  const { classes } = props;

  // Component has state
  const [count, setCount] = useState(0);

  function validateBeforeSave(){

  }

  function handleClick() {
  validateBeforeSave();
  .
  .
  .
  }

  return (
   <div>
      <Button>
      className="saveBtn"
      onClick={handleClick}
      </Button>
    </div>
  );

  };

  // Unit test
  describe('SomeComponent' () => {
  it('validates model on button click', () => {
      const wrapper = mount(
        <MuiThemeProvider theme={theme}>
          <SomeComponent/>
        </MuiThemeProvider>,
      );
  const instance = wrapper.instance();
      const spy = jest.spyOn(instance, "validateBeforeSave");
  wrapper
        .find('.saveBtn')
        .at(0)
        .simulate('click');
      expect(spy).toHaveBeenCalledTimes(1);
    });
  }

我在这里想念什么? spyOn如何与功能组件一起使用?

What am I missing here? How does spyOn work with function components?

我使用create-react-app模板创建了该应用程序，它具有测试包的这些依赖项

I created the app using the create-react-app template and it has these dependencies for test packages

"devDependencies": {
    "ts-jest": "^23.10.3",
    "@types/jest": "24.0.9",
    "@types/enzyme": "^3.9.1",
    "@types/enzyme-adapter-react-16": "^1.0.2",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.11.2",
    "enzyme-to-json": "^3.3.5",
  }

推荐答案

在此处再次发表我的评论以回答您的问题:您的validateBeforeSave函数在SomeComponent中声明，从而使其无法在外部访问.您可以将该函数作为道具传递，然后可以创建间谍并将其作为道具值传递给您的测试，并测试是否通过了(spy)的道具函数

Posting my comment here again to answer your question: Your validateBeforeSave function is declared within SomeComponent making it a closed/private scope function not accessible outside. You can pass that function as a prop and you can then create spy and pass it as a prop value in your test and test for if the prop function passed (spy) was called or not

所以您可以像下面这样修改您的函数:

So you would modify your function somewhat like this:

// some validator function
function validateBeforeSave(){
  ...
}

// Some function Component

const SomeComponent = (props: IMyComponentProps) => {
  const { classes, validateBeforeSave } = props;

  // Component has state
  const [count, setCount] = useState(0);


  function handleClick() {
  validateBeforeSave();
  .
  .
  .
  }

  return (
   <div>
      <Button>
      className="saveBtn"
      onClick={handleClick}
      </Button>
    </div>
  );

};

在单元测试中，如下所示:

And In your Unit test, something like this:

  // Unit test
  describe('SomeComponent' () => {
  it('validates model on button click', () => {
      const validateSpy = jest.fn();
      const wrapper = mount(
        <MuiThemeProvider theme={theme}>
          <SomeComponent validateSpy={validateSpy}/>
        </MuiThemeProvider>,
      );
      const instance = wrapper.instance();
      wrapper
        .find('.saveBtn')
        .at(0)
        .simulate('click');
      expect(validateSpy).toHaveBeenCalledTimes(1);
    });
  }

这篇关于如何使用Typescript将jest.spyOn与React函数组件一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！