小编cod*_*pic的帖子

从Jest注意：注意：默认情况下，jest.spyOn也调用spied方法。

在我的Angular组件中。

ngAfterViewInit(): void {
  this.offsetPopoverPosition();
}

在我的规格中：

it('ngAfterViewInit() method should call offsetPopoverPosition() method', () => {
    const mockListener = jest.spyOn(cmp, 'offsetPopoverPosition');
    const spy = mockListener.mockImplementation(() => {
      console.log('in the mock');
    });

    cmp.ngAfterViewInit();
    expect(spy).toHaveBeenCalled();
  });

简单。然而，原始功能仍在被调用。我检查了Jest 23.x文档：https : //jestjs.io/docs/en/23.x/jest-object#jestspyonobject-methodname https://jestjs.io/docs/en/23.x/mock-function -api＃mockfnmockimplementationfn

互联网上的例子很少，但我无法阻止开玩笑地调用原始offsetPopoverPosition()方法。

有任何想法吗？

我交叉链接到Jest github问题，由于某种原因该问题未解决而已关闭。

开玩笑spyOn（）调用实际函数，而不是模拟

如标题所示。

在 Okta 开发论坛https://devforum.okta.com/t/okta-sign-in-widget-breaks-neutrino-jest-tests/2874上发现了这个问题，作者提到将canvas-prebuiltnpm 包添加到 devDependencies 为他修复了它.

可悲的是它对我不起作用。

有人在使用 Okta 登录小部件时遇到过这个错误吗？

我正在使用 Jest 23.x 和这两个 npm 包，它们帮助我将 Okta 登录小部件集成到我的 Angular 应用程序中。

• "@okta/okta-angular": "^1.2.1",
• "@okta/okta-signin-widget": "^2.19.0",

一切正常 - 我可以成功登录和注销 - 除了运行 Jest 测试时的错误。

编辑：我还发现了这个 Github 问题https://github.com/csivision/qrcode-react/issues/15，它似乎与我的问题有些相关，但解决方案仍然让我望而却步。

第二次编辑：

这是完整的错误堆栈

 console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
    at module.exports (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\jsdom\lib\jsdom\browser\not-implemented.js:9:17)
    at HTMLCanvasElementImpl.getContext (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\jsdom\lib\jsdom\living\nodes\HTMLCanvasElement-impl.js:42:5)
    at HTMLCanvasElement.getContext (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\jsdom\lib\jsdom\living\generated\HTMLCanvasElement.js:50:45)
    at getContext (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\@okta\okta-signin-widget\dist\js\webpack:\packages\@okta\qtip2\dist\jquery.qtip.js:2078:50)
    at Object.<anonymous> (C:\Users\18790\source\Workspaces\ionComplianceUI\node_modules\@okta\okta-signin-widget\dist\js\webpack:\packages\@okta\qtip2\dist\jquery.qtip.js:2077:24)
FAIL  src/app/ion-okta-auth/login/__tests__/login.component.spec.tsules\@okta\okta-signin-widget\dist\js\webpack:\packages\@okta\qtip2\dist\jquery.qtip.js:22:3

这个Github 问题和进一步的调查让我找到了jest-canvas-mock npm 包，需要将其添加为 devDependency 并使用 …

在下面的简单示例中，我正在寻找一种方法来获取例如CardBodychild.

const Card = ({children}) => {
  const cardHeadChild = ...;
  const cardBodyChild = ...;
  return (
    <div>
      {cardHeadChild}
      {cardBodyChild}
    </div>
  )
}

const CardHead = () => <div>Head</div>
const CardBody = () => <div>Body</div>

// Usage:
<Card>
  <CardHead>
  <CardBody>
</Card>

我无法通过索引获取（例如：）React.Children.toArray(children)[1]，因为孩子是可选的。

我尝试过这样的事情：

React.Children.forEach(children, child => {
   if(child.type.name === 'CardBody') cardBodyChild = child
   // or
   if(child.type.displayName === 'CardBody') cardBodyChild = child
  ..
})

但当组件被封装在 HOC 中时它不起作用。

有什么解决办法吗？

我们如何将多个输入传递给组合内部的函数？

const scaleLinear = R.curry((domain,range,t)=>{
    let [a,b] = domain,
        [c,d] = range;
    return (1 - (t-a)/(b-a))*c + (t-a)(b-a)*d;

//getDomain: arr1 -> [xmin,xmax]
//getRange:  arr2 -> [ymin,ymax]
const scale = R.compose(scaleLinear, getDomain, getRange);

显然上面的方法不起作用，但是有什么替代方法可以让我最终传入 2 条数据（arr1，arr2），并得到适当的比例？

我正在尝试显示一个饼图并且它实际上正在工作，即使我收到 TypeScript 编译错误： Argument of type '(d: any) => {}' is not assignable to parameter of type 'datum: Arc<number>, index: number, outerIndex: number) => number | string | boolean'. Type '{}' is not assignable to type 'number | string | boolean'. Type '{}' is not assignable to type 'boolean'.

过去 2 年我一直在使用 TypeScript，但上面的行让我头晕目眩。我不知道发生了什么，我尝试了几件事，但到目前为止没有任何效果。

这是实际绘制饼图的代码：

function drawChart(){
            var width = 960,
                height = 500,
                radius = Math.min(width, height) / 2;

            var colourValues = d3.scale.ordinal().range(d3.values(that.ColoursService.colours));

            var arc = d3.svg.arc()
                .outerRadius(radius - 10) …