如何在测试时触发功能组件的卸载

Question

我使用了"useEffect"；以实现"；componentWillUnmount"；在功能组件中。在使用Jest/Enzyme测试组件时，如何触发？

我的组件：

const myComp = () => {
useEffect(() => () => {
console.log('Unmounted');
}, []);
return <div>Test</div>;
}

Answer 1

如果您使用的是react测试库，那么：

const { unmount } = render(<Component />);
unmount();

Answer 2

根据这个问题，我们知道shallowrender不支持useEffect挂钩。我们需要使用mount并手动调用Unmunt((方法。

例如

index.tsx:

import React, { useEffect } from 'react';
export const MyComp = () => {
useEffect(
() => () => {
console.log('Unmounted');
},
[]
);
return <div>Test</div>;
};

index.test.tsx:

import React from 'react';
import { mount } from 'enzyme';
import { MyComp } from './';
describe('67384129', () => {
it('should pass', () => {
const wrapper = mount(<MyComp />);
wrapper.unmount();
});
});

测试结果：

PASS  examples/67384129/index.test.tsx (8.233 s)
67384129
✓ should pass (53 ms)
console.log
Unmounted
at examples/67384129/index.tsx:6:15
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.121 s

软件包版本：

"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"react": "^16.14.0"
"jest": "^26.6.3",
"jest-environment-enzyme": "^7.1.2",
"jest-enzyme": "^7.1.2",