Question

我在react-i18next和mobx-react提供商中包含以下组件：

import React from "react";
import s from "styled-components";
import { observer, inject } from "mobx-react";
import { translate } from "react-i18next";

@inject("uiStore", "fieldsStore")
@observer
export class HeaderCell extends React.Component {
  render() {
    const { t } = this.props;

    return (
      <InputSyle>
        <div className="rootCell" />
      </InputSyle>
    );
  }
}

const InputSyle = s.tr`
  background-color: red;
`;

export default translate()(HeaderCell);

我正在尝试编写一个简单的测试来声明.rootCell div被渲染：

import React from "react";

import { Provider } from "mobx-react";

import Enzyme from "enzyme";
import { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-15";

import HeaderCell from "./HeaderCell";

import { I18nextProvider } from "react-i18next";
import i18n from "../../../../utils/i18n";

const stores = {
  uiStore: {},
  fieldsStore: {}
};

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

describe("HeaderCell.js", () => {
  it("renders a single .rootCell div", () => {
    const wrapper = mount(
      <I18nextProvider i18n={i18n}>
        <Provider {...stores}>
          <HeaderCell />
        </Provider>
      </I18nextProvider>
    );
    expect(wrapper.find(".rootCell")).toHaveLength(1);
  });
});

但是我没有通过测试，而是得到以下控制台输出：

FAIL src / components / Sidebar / ParcelsGrid / HeaderCell / HeaderCell.test.js● HeaderCell.js>呈现单个.rootCell div
expect(received).toHaveLength(length)

Expected value to have length:
  1
Received:
  {"length": 0, Symbol(enzyme.__unrendered__): null, Symbol(enzyme.__renderer__): {"batchedUpdates": [Function
batchedUpdates]，“getNode”：[Function getNode]，“render”：[Function 渲染]，“simulateEvent”：[Function simulateEvent]，“unmount”： [功能卸载]}，符号（酶。 root ）：{“长度”：1，符号（酶。未渲染）:,符号（酶。渲染器）： [对象]，符号（酶。 root ）：[循环]，符号（酶。节点）：[对象]，符号（酶。节点）：[数组]，符号（酶。选项）：[对象]}，符号（酶。节点）： undefined，Symbol（酶。节点）：Array []，符号（酶。选项）：{“adapter”：[Object]}} received.length： 0
  at Object.it (src/components/Sidebar/ParcelsGrid/HeaderCell/HeaderCell.test.js:30:39)
      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)

从消息我假设我的组件没有被渲染，但我不知道为什么。

我正在使用"custom-react-scripts": "^0.2.0"，"enzyme": "^3.2.0"， "enzyme-adapter-react-15": "^1.0.5"，"react-i18next": "^6.0.6"。

我会说测试代码是正确的，但不是很确定吗？由于没有控制台错误，所有包装器似乎也正常工作。

酶装置返回没有错误的未渲染组件

0 个答案: