模擬反應 dom Jest

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.

似乎當我模擬 render 方法時它不會返回任何東西。 我怎樣才能正確地嘲笑它？

我正在使用本教程，請參閱“模擬的藝術”部分。

Answer 1

如果要在同一個文件中創建手動模擬創建，如下所示：

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

我建議看一下 快照並將其與 enyzme 一起使用。 它使測試更容易，因為您可以編寫如下內容：

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

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

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

這為您提供了組件如何准確呈現的快照。 你也可以將它與你測試的函數一起使用，它會給你一個你的函數被調用的所有調用的快照，以及函數被調用的參數。

Answer 2

你應該創建一個模擬文件在您node_modules旁邊__mocks__/react-dom.js

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

Answer 3

接受的答案可能有點過時了。 要在沒有副作用的情況下模擬react-dom ，您只需要模擬所需的 function，在本例中是render function。

這可以使用 Jest 的requireActual來完成，如下所示：

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