Question

我试图使用Jest

来模拟react-dom模块

import React from 'react';
import {configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Link from '../components/DumbComp';
import { shallowToJson } from 'enzyme-to-json';
import { render } from 'react-dom';

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

jest.mock('react-dom');
describe('Link',() =>{
it('should render correctly', ()=>{
expect(render).toHaveBeenCalledWith(
  <Link title="mockTitle" url="mockUrl" />, 'element-node'
);
expect(render).toHaveBeenCalledTimes(1);
});
});

当我运行测试时，我收到以下错误：

Link › should render correctly

expect(jest.fn()).toHaveBeenCalledWith(expected)

Expected mock function to have been called with:
  [<Link title="mockTitle" url="mockUrl" />, "element-node"]
But it was not called.

似乎当我模拟渲染方法时它不返回任何东西。关于如何正确嘲笑它的任何想法。

我正在使用本教程：https://medium.com/wehkamp-techblog/unit-testing-your-react-application-with-jest-and-enzyme-81c5545cee45

根据＆＃34;嘲笑的艺术＆＃34;部分。

由于

Answer 1

如果要在同一个文件中创建手动模拟创建，请执行以下操作：

jest.mock('react-dom', () => ({
     render: jest.fn(),
}));

我建议您查看snapshot并将其与enyzme一起使用。它使测试更容易，因为你可以写这样的东西：

describe ('Link',() =>{
  it ('should render correctly', ()=> {

    const component = mount(
      <Link title="mockTitle" url="mockUrl" />
    );

    expect(component).toMatchSnapshot();
  });
});

它为您提供了如何精确渲染组件的快照。您还可以将它与您测试的函数一起使用，它将为您提供函数调用的所有调用的快照以及函数调用的参数。

Answer 2

您应该在__mocks__/react-dom.js

中的 node_modules 旁边创建一个模拟文件

// react-dom.js
export default {
  render: jest.fn(),
};

Mock react-dom Jest

2 个答案: