测试 React 组件

Question

我一直在挠头试图找到一种方法来测试将哪些道具传递到我编写的 React 组件中。参见示例：

FirstName.js

export default FirstName = (props) => {
 return (
   <Select value={props.value} />
 );
}

Select.js

export default Select = (props) => {
 return (
   <div>props.value</div>
 );
}

我要编写的测试是针对 FirstName 组件的，我想确保将值属性传递到 Select 组件值属性。

但是目前我唯一可以验证的方法是断言 Select.js 的输出，这不是我正在测试的单元的一部分，所以我真的不想让 FirstName.test.js 文件取决于 Select.js.

内部发生的更改

我听说的一种解决方案是使用 jest.mock('path/to/Select.js') 或

jest.mock('../moduleName', () => {
  return {
    __esModule: true,
    default: jest.fn(),
  };
});

但是由于某种原因，我的测试中的 Select 是模拟函数，但 FirstName.js 中的 Select 不是，因此出于某种原因它存根了测试但不测试运行代码。

有什么想法吗？

Answer 1

可以试试下一种方法吗

import FirstName from '../src/FirstName';
describe('<FirstName />', () => {
  const mockProps = { name: 'name', };
  it('Check Select props', () => {
    const wrapper = shallow(<FirstName {...mockProps} />);
    expect(wrapper.find('Select').props()).toBe(mockProps);
  });

});

测试 React 组件

Testing React components

javascript

unit-testing

reactjs

react-testing-library