Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does #describe and #it methods do in TDD react testing?

I'm learning TDD with React from this site, but don't understand how the author got describe and it, aren't these usually from Jasmine? I don't see this package in the author's node_modules at his github nor does his tests.js import anything that looks like describe or it. Where are these two methods coming from?

import React from 'react';
import { expect } from 'chai';
import { shallow, mount, render } from 'enzyme';


describe('Test suite for User component', () => {
  it('UserComponent should exist', () => {
    let wrapper = shallow(<User />)
    expect(wrapper).to.exist;
  });
});
like image 890
stackjlei Avatar asked Sep 01 '25 21:09

stackjlei


1 Answers

If that is the only it() statement that you are going to be using in your test suite, you do not really need the describe() block.

The describe() construct does indeed exist in Jest, it exists in Mocha as well.

The describe() function is used to group together certain sets of tests that have some common setup and tear down for each of them. This is why I said, based on the code you pasted, if you have nothing further to test, you do not need that describe() function.

So when you run create-react-app one of the libraries that got loaded automatically was the Jest test suite.

I would also rewrite that test, instead of UserComponent should exist, I would do

it('shows a user component', () => {
  let wrapper = shallow(<User />);
  expect(wrapper.find(User).length).toEqual(1);
});

So this is where I recommend to not just follow tutorials, but look up the documentation of the tools they are having you utilize in these tutorials. In the case of Enzyme, there is a really nice method called find() to find the component and it offers an array so you can add on .length and since its just one component of User you can add at the end .toEqual(1);

like image 142
Daniel Avatar answered Sep 03 '25 11:09

Daniel