测试 React 组件

Question

我一直在努力寻找一种方法来测试哪些 props 被传递到我编写的 React 组件中。 见示例：

名字.js

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

选择.js

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

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

然而，目前我可以验证这一点的唯一方法是在 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);
  });

});