reactjs中组件的单元测试功能使用业力和茉莉花

Posted 2023-03-16

【中文标题】reactjs中组件的单元测试功能使用业力和茉莉花

【英文标题】：Unit test function of component in reactjs using karma and Jasmine

【发布时间】：2017-07-09 08:12:23

【问题描述】：

我有一个 reactjs 组件，并且该组件内有一个函数。我想为此编写单元测试用例。下面是我的示例单元测试用例。函数名称是 getNewGroupName

describe("CreateGroupName component", () => 

      it("Correct Copy name should be generated for first copy", () => 
          component = ReactTestUtils.renderIntoDocument( < CreateGroupName reactor = 
              reactor
             > < /CreateGroupName>);

            expect(component.getNewGroupName("SampleGroupName")).tobe("SampleGroupName - Copy(1)")
          );

      );

但是当我运行单元测试用例时，我遇到了错误

TypeError: undefined is not a constructor (evaluating 'e.getNewGroupName("SampleGroupName")')

使用调试器查看对象后，我只能看到该对象的以下属性。

我还尝试使用酶库编写上述测试。但是两者都在结果中给了我相同的对象。

 it("Correct Copy name should be generated for first copy", () => 
            const wrapper = enzyme.mount(<CreateGroupName reactor=reactor></CreateGroupName>);
            const inst = wrapper.instance();
            expect(inst.getNewGroupName('SampleGroupName')).toBe("SampleGroupName - Copy(1)");
        );

这是我的组件

堆栈跟踪如下

"TypeError: t.getNewGroupName is not a function
    at Object.<anonymous> (http://localhost:9876/base/app/spec/webpack.loader.js:96:18873)
    at attemptSync (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1886:24)
    at QueueRunner.run (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1874:9)
    at QueueRunner.execute (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1859:10)
    at Spec.queueRunnerFactory (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:697:35)
    at Spec.execute (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:359:10)
    at Object.fn (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:2479:37)
    at attemptAsync (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1916:24)
    at QueueRunner.run (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1871:9)
    at http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1898:16"

【问题讨论】：

CreateGroupName 组件是什么样的？这通常发生在它没有正确返回某些东西时。

.toBe() 代替 .tobe() 怎么样？

我已更正此问题，但仍无法正常工作

你的代码中e.getNewGroupName("SampleGroupName")在哪里？

【参考方案1】：

ReactTestUtils.renderIntoDocument() 渲染一个 DOM 节点，表示组件在渲染后的输出。见https://facebook.github.io/react/docs/test-utils.html#renderintodocument

您似乎正在尝试调用 getNewGroupName()，它是您的 React 组件上的一个函数，而不是渲染的 DOM 节点上的一个方法。

【讨论】：

有没有办法测试组件的功能？或者那是不可能的

看看 Jest (facebook.github.io/jest) 以帮助对 React 组件进行单元测试。另请查看 Enzyme (airbnb.io/enzyme) 以获取渲染组件的帮助，然后针对渲染结果进行断言。然后，您可以使用 renderresult.instance().yourfunction() 来调用组件上的方法。看看这里：github.com/airbnb/enzyme/issues/208

如果你检查我的单元测试用例的第二个样本，我正在做同样的事情，但它失败了