反应测试<t>标签

Question

我正在将Material Design Bootstrap用于React.js，并想在组件上进行一些浅表渲染，以测试元素是否在屏幕上渲染。但是，当我创建shallowWrapper时，在包装器上使用.debug（）函数时，几乎所有组件都已生成<t>标签。

• 我是否正确测试此代码？
• 是否应该生成这些标签？
• 如何停止生成这些标签？

我的组件：

<Container>
        <div className="d-flex justify-content-around">
            <Button color="info" onClick={this.toggle}>View Graph</Button>
        </div>

        <Modal isOpen={this.state.modal} toggle={this.toggle} size="lg">
            <ModalHeader toggle={this.toggle}>{this.state.title} Data from {this.state.first} - {this.state.last}</ModalHeader>
            <ModalBody>
                <LineChart data={this.state.graphData}
                           dataset={{pointRadius: 5}}
                           download={gName}
                           messages={{empty:"No data loaded"}}
                           library={{
                               scales: {
                                   xAxes: [{
                                       ticks: {
                                           maxRotation:0
                                       }
                                   }]
                               },
                               title: {
                                   display: false,
                                   text: "Data from "+this.state.first+" - "+this.state.last
                               },
                               hover: {
                                   mode: 'nearest',
                                   intersect: true
                               },
                               tooltips: {
                                   mode: 'index',
                                   intersect: false,
                               }
                           }}
                           curve={false}/>
            </ModalBody>
            <div className="d-flex justify-content-around">
                <ModalFooter>
                    <Button color="secondary" onClick={this.toggle}>Close</Button>
                </ModalFooter>
            </div>
        </Modal>
    </Container>

我的测试代码

import React from 'react'
import { shallow } from 'enzyme';
import ModalGraph from '../components/modal/ModalGraph';
import { Container } from 'mdbreact';

describe('ModalGraph Component', () => {
    let shallow_render;

    beforeEach(() => {
        shallow_render = shallow(<ModalGraph/>)
    });

    it('-> should render without throwing an error', () => {
        console.log(shallow_render.debug());
        expect(shallow_render.find('Container').exists()).toBe(true);
    })
});

测试输出

 RUNS  src/testing/ModalGraph.test.js

Test Suites: 0 of 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1s, estimated 3s
  console.log src/testing/ModalGraph.test.js:14
    <t tag="div" fluid={false}>
      <div className="d-flex justify-content-around">
        <t color="info" onClick={[Function]} tag="button">
          View Graph
        </t>
      </div>
      <t isOpen={false} toggle={[Function]} size="lg" autoFocus={true} role="dialog" backdrop={true} keyboard={true} zIndex={1050} fade={true} modalTransitionTimeout={300} backdropTransitionTimeout={150}>
        <t toggle={[Function]} tag="h4" closeAriaLabel="Close">
           Data from 
           - 
        </t>
        <t>
          <Component data={{...}} dataset={{...}} download="Sensor10/28/2018" messages={{...}} library={{...}} curve={false} />
        </t>
        <div className="d-flex justify-content-around">
          <t>
            <t color="secondary" onClick={[Function]} tag="button">
 FAIL  src/testing/ModalGraph.test.js
  ModalGraph Component
    ✕ -> should render without throwing an error (38ms)

  ● ModalGraph Component › -> should render without throwing an error

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      13 |     it('-> should render without throwing an error', () => {
      14 |         console.log(shallow_render.debug());
    > 15 |         expect(shallow_render.find('Container').exists()).toBe(true);
         |                                                           ^
      16 |     })
      17 | });

      at Object.toBe (src/testing/ModalGraph.test.js:15:59)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.776s, estimated 3s
Ran all test suites matching /modal/i.

依赖项

"dependencies": {
    "chart.js": "^2.7.3",
    "firebase": "^5.5.4",
    "mdbreact": "^4.8.1",
    "react": "^16.5.2",
    "react-chartkick": "^0.3.0",
    "react-dom": "^16.5.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.0.5"
  }
"devDependencies": {
    "ajv": "^6.5.4",
    "ajv-keywords": "^3.2.0",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.6.0",
    "firebase-tools": "^5.0.1",
    "jsdoc": "^3.5.5",
    "react-test-renderer": "^16.5.2",
    "sinon": "^6.3.5"
  }