Question

我有这个React组件

import React from 'react';

class template extends React.Component {
  render() {
    return (
      <div>
        <p>count: 0</p>
      </div>
    );
  }
}

export default template;

并尝试对其进行测试

import React from 'react'; // eslint-disable-line no-unused-vars
import { shallow } from 'enzyme';

    import template from '../common/template';

    describe('template.js', () => {
      it('Renders template success ', () => {
        const wrapper = shallow(<template />);
        const text = wrapper.find('p').text();
        expect(wrapper.length).toEqual(1);
        expect(text).toEqual('count: 0');
      });
    });

出现以下错误。

src/components/__tests__/template.js
  ● template.js › Renders template success

    Method “text” is meant to be run on 1 node. 0 found instead.

       6 |   it('Renders template success ', () => {
       7 |     const wrapper = shallow(<template />);
    >  8 |     const text = wrapper.find('p').text();
         |                                    ^
       9 |     expect(wrapper.length).toEqual(1);
      10 |     expect(text).toEqual('count: 0');
      11 |   });

      at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1958:17)
      at ShallowWrapper.text (node_modules/enzyme/build/ShallowWrapper.js:1097:21)
      at Object.text (src/components/__tests__/template.js:8:36)

wrapper.text（）为空。我在做什么错了？

使用此命令运行测试

eslint src && react-scripts test --env=jsdom --coverage

应用是使用create react应用https://github.com/facebook/create-react-app

创建的

"@types/jest": "^23.3.12",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"react-scripts": "2.1.3",
"react": "^16.7.0",

更新：

似乎浅层无法正常工作，或者我缺少某些东西。在测试中添加以下两行

console.log('wrapper:::::', wrapper);
console.log('wrapper.text:::::', wrapper.text());

返回这些输出

console.log('wrapper.text', wrapper.text());
   console.log src/components/__tests__/template.js:8
      wrapper::::: ShallowWrapper {}
    console.log src/components/__tests__/template.js:9
      wrapper.text:::::

ReactJS：使用Jest Enzyme浅文本进行测试返回空

0 个答案: