运行 jest 测试以进行反应时出现 Plotly 错误答案

【问题标题】：Plotly error when running jest test for react运行 jest 测试以进行反应时出现 Plotly 错误
【发布时间】：2016-12-09 06:46:56
【问题描述】：

  - TypeError: Cannot read property 'addStyleRule' of undefined
    at Object.<anonymous> (node_modules/plotly.js/build/plotcss.js:61:15)
    at Object.<anonymous> (node_modules/plotly.js/src/plotly.js:30:1)
    at Object.<anonymous> (node_modules/plotly.js/src/core.js:15:14)
    at Object.<anonymous> (node_modules/plotly.js/lib/core.js:9:18)
    at Object.<anonymous> (node_modules/plotly.js/lib/index.js:15:12)

    at emitTwo (events.js:106:13)
    at process.emit (events.js:191:7)
    at process.nextTick (internal/child_process.js:719:12)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

我的 react 项目使用 plotly 并且在运行 jest 测试时遇到了 plotly 问题

我的测试代码如下所示：

import React from 'react'
import ReactDOM from 'react-dom'
import TestUtils from 'react-addons-test-utils'

import AppBar from "./index"
import Navigation from "../navigation/"

// Use real modules for testing.
jest.unmock("./index")
jest.unmock("./brand")

describe("AppBar", () => {
  let component = <AppBar />
  let element = TestUtils.renderIntoDocument(component)
  let node = ReactDOM.findDOMNode(element)

  it("renders the navigation to screen", () => {
    let el = TestUtils.findRenderedComponentWithType(element, Navigation)
    expect(el).toBeDefined()
  })
})

我认为模拟情节与未定义错误的 addStyleRule 有关，但我还没有完全确定对于使用外部库的这种特殊情况需要模拟/取消模拟什么

【问题讨论】：

标签： javascript reactjs plotly jestjs

【解决方案1】：

我最终只是取消了 plotly 库。警告它会使您的测试运行非常缓慢，因为它现在正在渲染。

奖励：覆盖组件道具

  import Plotly from 'plotly.js'
  import MyComponent from "./index";

  // Use real modules for testing.
  jest.unmock("plotly.js");
  jest.unmock("./index");

  describe("My component does something", () => {
    let params = {
      display: true
    };

    let ComponentMock = class extends MyComponent {
      constructor(props) {
        super(props);
        this.actions = {
          myAction: null
        }
      }
    };
    let el = <ComponentMock params={params}/>
  });

【讨论】：