用玩笑和酶从事React功能成分法的研究；无法监视原始值 [英] Spying on React functional component method with jest and enzyme; Cannot spyOn on a primitive value

问题描述

我正在尝试测试React组件，并确保单击它的按钮时，将调用正确的方法。但是，当我尝试运行测试并尝试使用该方法进行监视时，会收到以下消息：

I am trying to test a React component and make sure that when its button gets clicked, the correct method gets invoked. However, when I try to run my test and try to spy on that method, I get the following message:

错误：无法在原始值；未定义给定

Error: Cannot spyOn on a primitive value; undefined given

如何测试单击按钮时是否调用了正确的方法？谢谢！

How do I test that when a button is clicked the correct method is invoked? Thanks!

sampleComponent.jsx：

import * as React from 'react';

const SampleComponent = () => {
  const sampleMethod = () => {
    console.log('hello world');
  };

  return <button onClick={sampleMethod} type="button">Click Me</button>;
};

export default SampleComponent;

sampleComponent.test.jsx：

import * as React from 'react';
import { shallow } from 'enzyme';
import SampleComponent from './sample';

test('testing spy', () => {
  const spy = jest.spyOn(SampleComponent.prototype, 'sampleMethod');
  const wrapper = shallow(<SampleComponent />);
  wrapper.find('button').simulate('click');
  expect(spy).toHaveBeenCalled();
});

推荐答案

错误表示，函数 SampleComponent 中定义的> sampleMethod 在 SampleComponent.prototype 中未定义。所以 SampleComponent.prototype.sampleMethod 是未定义，开玩笑不能窥探未定义值。

The error means, the function sampleMethod you defined inside the functional component SampleComponent is not defined in SampleComponent.prototype. So SampleComponent.prototype.sampleMethod is undefined, jest can't spy on a undefined value.

因此测试 sampleMethod 事件处理程序的正确方法如下：

So the correct way to test sampleMethod event handler is like this:

index.spec.tsx ：

import React from 'react';
import SampleComponent from './';
import { shallow } from 'enzyme';

describe('SampleComponent', () => {
  test('should handle click correctly', () => {
    const logSpy = jest.spyOn(console, 'log');
    const wrapper = shallow(<SampleComponent></SampleComponent>);
    const button = wrapper.find('button');
    expect(button.text()).toBe('Click Me');
    button.simulate('click');
    expect(logSpy).toBeCalledWith('hello world');
  });
});

我们可以监视 console.log ，

具有100％覆盖率的单元测试结果：

Unit test result with 100% coverage:

 PASS  src/react-enzyme-examples/02-react-hooks/index.spec.tsx
  SampleComponent
    ✓ should handle click correctly (19ms)

  console.log node_modules/jest-mock/build/index.js:860
    hello world

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.tsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.036s

依赖项版本：

"react": "^16.11.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"jest": "^24.9.0",
"jest-environment-enzyme": "^7.1.1",
"jest-enzyme": "^7.1.1",

这篇关于用玩笑和酶从事React功能成分法的研究；无法监视原始值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！