使用反应测试库测试 UNSAFE_componentWillReceiveProps答案

【问题标题】：testing UNSAFE_componentWillReceiveProps with react testing library使用反应测试库测试 UNSAFE_componentWillReceiveProps
【发布时间】：2020-01-21 17:17:37
【问题描述】：

我正在尝试使用 RTL 来测试使用 UNSAFE_componentWillReceiveProps 的旧组件。

it('calls UNSAFE_componentWillReceiveProps correctly', () => {


  const { rerender,  getByText } = render(<Page {...props} />);

  let button = getByText('Done');

  expect(button).toBeDisabled();

  const nextProps = {
    ...props,
    foo: {
      bar: 5
    }
  };


  rerender(<Page {...nextProps} />);
  // UNSAFE_componentWillReceiveProps is not called here

  expect(button).toBeEnabled();
});

我知道，我知道，我们应该重构以摆脱 UNSAFE 组件，我们将，但似乎 RTL 应该能够处理这个问题。我错过了什么？

【问题讨论】：

标签： reactjs components react-testing-library

【解决方案1】：

它对我来说很好用。无法重现您的问题。例如

index.tsx:

import React, { Component } from 'react';

interface PageProps {
  foo: string;
  disabled?: boolean;
}
export default class Page extends Component<PageProps> {
  UNSAFE_componentWillReceiveProps(nextProps: PageProps) {
    console.log('this.props: ', this.props);
    console.log('nextProps: ', nextProps);
  }
  render() {
    return <button disabled={this.props.disabled}>Done</button>;
  }
}

index.test.tsx:

import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import Page from './';

describe('58031892', () => {
  test('should pass', () => {
    const { rerender, getByText } = render(<Page foo="a" disabled />);
    const button = getByText('Done');
    expect(button).toBeDisabled();
    rerender(<Page foo="b" />);
    expect(button).toBeEnabled();
  });
});

测试结果：

 PASS  examples/58031892/index.test.tsx (12.803 s)
  58031892
    ✓ should pass (52 ms)

  console.log
    this.props:  { foo: 'a', disabled: true }

      at Page.UNSAFE_componentWillReceiveProps (examples/58031892/index.tsx:9:13)

  console.log
    nextProps:  { foo: 'b' }

      at Page.UNSAFE_componentWillReceiveProps (examples/58031892/index.tsx:10:13)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 index.tsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        14.505 s

包版本：

"@testing-library/react": "^11.2.2",
"@testing-library/jest-dom": "^5.11.6",
"jest": "^26.6.3",
"react": "^16.14.0"

【讨论】：