代码之家 › 专栏 › 技术社区 › AlbertMunichMar

测试道具是否通过(不使用酶)

reactjs

AlbertMunichMar · 技术社区 · 7 年前

我想测试我的道具是否通过,但不使用酶,

我试图在互联网上找到文档,但所有的教程都有。

describe('App Component', () => {
  it('renders the Counter wrapper', () => {
    const wrapper = shallow(<App />);
    expect(wrapper.find(Counter)).to.have.length(1);
  });

  it('passes all props to Counter wrapper', () => {
    const wrapper = shallow(<App />);
    let counterWrapper = wrapper.find(Counter);

    expect(counterWrapper.props().counter).to.equal(0);

    wrapper.setState({ counter: -1 });

    counterWrapper = wrapper.find(Counter);
    expect(counterWrapper.props().counter).to.equal(-1);
  });

有人能帮我吗?我可以开玩笑吗?或者我确实需要一个像“react testing library”这样的第三方库?

1 回复 | 直到 7 年前

Estus Flask 7 年前

酶 shallow 主要用于 独立单元测试

react测试库主要用于 黑盒功能测试 ,则断言单元对结果DOM的影响。

shallow renderer

可以在没有酶的情况下进行单独的测试和断言实现,这将产生样板代码。该方法并不特定于测试库,它可以通过任何渲染器实现,包括React的测试渲染器 snapshot testing . 一切( Counter App 组件)应该用笑话来嘲弄,例如:

  it('passes all props to Counter wrapper', async () => {
    const CounterMock = jest.fn(() => 'Counter');
    jest.mock('./counter-module', () => CounterMock);
    const App = await import('./app-module');

    // render <App/> and assert that the result is <div>Counter</div> 

    expect(CounterMock).toBeCalledWith({ counter: 0 });
  });

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

11 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前