测试 React 组件

Question

我一直在摸索，试图找到一种方法来测试将哪些道具传递到我编写的 React 组件中。见例子：

名字.js

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

选择.js

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

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

但是目前我可以验证这一点的唯一方法是在 Select.js 的输出上断言，它不是我正在测试的单元的一部分，所以我真的不想让 FirstName.test.js 文件依赖关于 Select.js 内部发生的变化。

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

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);
  });

});