无法使用子组件测试React容器

问题描述 投票:0回答:0

我有一个React容器,默认情况下,我在没有任何条件的情况下加载卡无状态组件,而测试时我无法通过测试。

import React from 'react';
import { configure, shallow, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { AddProduct } from './AddProducts';
import card from '../../components/UI/card/card';
import { MemoryRouter } from 'react-router-dom';

configure({ adapter: new Adapter() });

describe('<AddProduct />', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(
      <MemoryRouter>
        <AddProduct title="hi" />
      </MemoryRouter>,
    );
  });

  it('should render the card when its load', () => {
    expect(wrapper.find(card)).toHaveLength(1);
  });
});

我期望卡片组件的长度,但是却收到0

 the Errors are like this.

● <AddProduct /> › should render the card when its load

    expect(received).toHaveLength(length)

    Expected value to have length:
      1
    Received:
 {"length": 0, Symbol(enzyme.__root__): {"length": 1, Symbol(enzyme.__root__): [Circular], Symbol(enzyme.__unrendered__): <MemoryRouter><AddProduct title="hi" /></MemoryRouter>, Symbol(enzyme.__renderer__): {"batchedUpdates": [Function batchedUpdates], "getNode": [Function getNode], "render": [Function render], "simulateEvent": [Function simulateEvent], "unmount": [Function unmount]},
Symbol(enzyme.__node__): {"instance": null, "key": undefined, "nodeType": "class", "props": {"children": <AddProduct title="hi" />, "history": {"action": "POP", "block": [Function block], "canGo": [Function canGo], "createHref": [Function createPath], "entries": [{"hash": "", "key": "3ozzvy", "pathname": "/", "search": "", "state": undefined}], "go": [Function go], "goBack": [Function goBack], "goForward": [Function goForward], "index": 0, "length": 1, "listen": [Function listen], "location": {"hash": "", "key": "3ozzvy", "pathname": "/", "search": "", "state": undefined}, "push": [Function push], "replace": [Function replace]}}, "ref": null, "rendered": {"instance": null, "key": undefined, "nodeType": "class", "props": {"title": "hi"}, "ref": null, "rendered": null, "type":
[Function AddProduct]}, "type": [Function Router]}, Symbol(enzyme.__nodes__): [{"instance": null, "key": undefined, "nodeType": "class", "props": {"children": <AddProduct title="hi" />, "history": {"action": "POP", "block": [Function block], "canGo": [Function canGo], "createHref": [Function createPath], "entries": [{"hash": "", "key": "3ozzvy", "pathname": "/", "search": "", "state": undefined}], "go": [Function go], "goBack": [Function goBack], "goForward": [Function goForward], "index": 0, "length": 1, "listen": [Function listen], "location": {"hash": "", "key": "3ozzvy", "pathname": "/", "search": "", "state": undefined}, "push": [Function push], "replace": [Function replace]}}, "ref": null, "rendered": {"instance": null, "key": undefined, "nodeType": "class", "props": {"title": "hi"}, "ref": null, "rendered": null, "type": [Function AddProduct]}, "type": [Function Router]}], Symbol(enzyme.__options__): {"adapter": {"options": {"enableComponentDidUpdateOnSetState": true}}}}, Symbol(enzyme.__unrendered__): null, Symbol(enzyme.__renderer__): {"batchedUpdates": [Function batchedUpdates], "getNode": [Function getNode], "render": [Function render], "simulateEvent": [Function simulateEvent], "unmount": [Function unmount]}, Symbol(enzyme.__node__): undefined, Symbol(enzyme.__nodes__): Array [], Symbol(enzyme.__options__): {"adapter": {"options": {"enableComponentDidUpdateOnSetState": true}}}}
    received.length:
      0

      at Object.it (src/containers/Products/AddProducts.test.js:18:46)
          at new Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)
javascript reactjs unit-testing jestjs enzyme
© www.soinside.com 2019 - 2024. All rights reserved.