如何使用React测试和jest显式测试函数调用

cgvd09ve  于 2023-04-18  发布在  Jest
关注(0)|答案(1)|浏览(208)

我有如下组件

Class A extends Component {
    function1() { 
      this.func2
    }

    func2() {
      // returns some value
    }
    render() { 
       return() {
         <div> {this.function1}
        }
     }
 }

如何在react测试中直接调用func1,需要测试是否调用了func2。以前在酶中使用过的示例。

c86crjj0

c86crjj01#

如果我对你的问题理解正确,你需要做这些事情:
1.在测试中直接调用function1(),无需使用酶
1.调用function1()时,需要测试是否调用了func2()
下面是你可以在你的组件的Jest测试文件中实现同样的效果。为了完全只使用Jest和React,一些替代方案是:
1.使用React Test Utils呈现组件
1.创建一个示例,然后调用函数

test('func2 is called when function1 is called', () => {
  const mockFunc2 = jest.fn();
  const myComponent = ReactTestUtils.createRenderer().render(<A />);
  const instance = myComponent.getInstance();
  
  // Replace the implementation of func2 with our mock
  instance.func2 = mockFunc2;
  
  // Call function1
  instance.function1();
  
  // Expect func2 to have been called
  expect(mockFunc2).toHaveBeenCalled();
});

另外:

1.你可以使用来自同一个模块react-dom/test-utilsact(),并将你的渲染 Package 在里面,为Assert和执行更新准备一个组件。这使你的测试运行更接近React在浏览器中的工作方式。

import { act } from 'react-dom/test-utils';

  let myComponent;

  // Test first render and componentDidMount
  act(() => {
    myComponent = ReactTestUtils.createRenderer().render(<A />);
  });

1.您也可以阅读有关mock functions的内容以详细了解概念。

相关问题