cptiwari20
commented
5 years ago Please share your test code.
Open CristianoYL opened 6 years ago
cptiwari20
commented
5 years ago Please share your test code.
CristianoYL
commented
5 years ago @cptiwari20 As I said in the description, I did not modify any code. It's cloned from this course repo.
cptiwari20
commented
5 years ago Yes, I get it. This is happening because, in the course Stephen added the test before adding the HOC and Middlewares. As after this Stephen did not added the test for these components, therefore these tests are not running properly..
For understanding this more clearly, I will recommend that you should go through the course.
lakshmaji
commented
5 years ago @cptiwari20 agreed, but your's also failing https://github.com/cptiwari20/Advance-react-project, similar to this fashion.
lakshmaji
commented
5 years ago @CristianoYL, How did you resolve this?
cptiwari20
commented
5 years ago @cptiwari20 agreed, but your's also failing https://github.com/cptiwari20/Advance-react-project, similar to this fashion.
I followed the course, that's why it is failing.
CristianoYL
commented
5 years ago @lakshmaji I did not dig into it anymore. But it's likely that the tested component requires certain props that are provided by the app context under the hood, and are not provided in the tests.
For example, it might call for the history or match props which are provided by React-Router or some action creators by React-Redux. These props can be passed down from the parent components. In our tests, it's tested individually, thus lost access to these props.
To solve this, we either provide the exact same context. For example, for React-Router related component, we can wrap the component with a <Router> when creating the wrapper and then .dive() once more. In this way, we are still accessing the component while having access to props like history and match. For Redux related component, we can create a Redux store and pass it as props to our component when creating the test wrapper:
# create yourStore first
const wrapper = shallow(<YourComponent store={yourStore} />);Alternatively, which I personally use more often, is to provide a mocked context. For example, we can simply pass a mocked history and mocked match object, just a plain JS object containing the props you need, and pass it to your testing component. For example:
const mockedHistory = {
push: jest.fn(),
listen: jest.fn(),
};
wrapper = shallow(<YourComponent history={mockedHistory} />);Same for Redux, I often use mock-redux-store to create a lightweight mocked store and make it happen for my tests.
@cptiwari20 It would be nice to have a working example for new students at the start since it can be confusing. The course is of great quality (as always), but it doesn't justify the error in this repo. And it's not a good idea to blame the students not finish the course. However, I understand that keeping track of the new changes can be difficult. What I would suggest is to use separate folders for each section. It's easier to keep things in sync this way.
Cheers.
I recently enrolled in the Advanced React and Redux 2018 course, and tried to run the sample code. But 6 of the tests are failing.
I have attached the error log below, it's very verbose. I assume one can reproduce it easily instead.
Steps to reproduce:
/testingfoldernpm installnpm testFull error message (sorry ><)
FAIL src/tests/integrations.test.js ● Console
● can fetch a list of comments and display them
FAIL src/components/tests/App.test.js ● shows a comment box
● shows a comment box
● shows a comment list
● shows a comment list
FAIL src/components/tests/CommentBox.test.js ● Console
● has a text area and two buttons
● has a text area and two buttons
● has a text area and two buttons
● the text area › has a text area that users can type in
● the text area › has a text area that users can type in
● the text area › has a text area that users can type in
● the text area › has a text area that users can type in
● the text area › when form is submitted, text area gets emptied
● the text area › when form is submitted, text area gets emptied
● the text area › when form is submitted, text area gets emptied
● the text area › when form is submitted, text area gets emptied