Front End Libraries React Exercise Github Code

1

Hello,

Am trying to setup react test locally in order to do react exercises locally.

Where can I find the test performed on the exercise in the FCC github code.(Already looked. No luck).

The closest I got is this:

https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/03-front-end-development-libraries/react/create-a-simple-jsx-element.md

2

Hello there,

These are the tests:
image

If you want to complete them locally, then you can set up freeCodeCamp locally:

Otherwise, you will need to parse the Markdown content yourself, and run the tests that way.

Hope this helps

1 Like
3

Yes.

I already know these are the tests. But there setup to make them useful isn’t shown.

I’m trying to setup this up locally already. I’d like to see how its setup in free code camp code and hope to emulate the procedure.

I’ve gotten this far so far:

https://github.com/kbventures/fccfrontenddevelopmentlibraries/blob/main/react/src/react01.test.js

4

I downloaded the code form git hub already. I don’t know where the test setup is inside the code. I’ve spent 5 days trying to set it up locally. I think I am pretty close.

5

jest.config.js

module.exports = {
  testPathIgnorePatterns: ['/node_modules/'],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|svg|woff|woff2)$':
      '<rootDir>/client/src/__mocks__/fileMock.ts',
    // Plain CSS - match css files that don't end with
    // '.module.css' https://regex101.com/r/VzwrKH/4
    '^(?!.*\\.module\\.css$).*\\.css$':
      '<rootDir>/client/src/__mocks__/styleMock.ts',
    // CSS Modules - match files that end with 'module.css'
    '\\.module\\.css$': 'identity-obj-proxy',
    '^lodash-es$': 'lodash'
  },
  globals: {
    __PATH_PREFIX__: ''
  },
  verbose: true,
  transform: {
    '^.+\\.[jt]sx?$': '<rootDir>/jest.transform.js'
  },
  roots: ['.', './client', './api-server'],
  transformIgnorePatterns: ['node_modules/(?!(gatsby)/)'],
  setupFilesAfterEnv: ['./jest.setup.js'],
  testEnvironment: 'jsdom'
};

Are the test inside the client directory?

6

The tests are setup, and run mostly here:

7

I’ll have a look at that code. Thanks.

I got one of the test working. I think. :sweat_smile:

// The constant JSX should return an h1 element.

// assert(JSX.type === 'h1');
// The h1 tag should include the text Hello JSX!

// assert(Enzyme.shallow(JSX).contains('Hello JSX!'));


// MyComponent.test.js
import React from 'react';
import {shallow } from 'enzyme';
import JSX from './fccexercises/react01';
// import {expect} from 'chai';



describe("H1 tag should include the text: Hello JSX!", () => {
  it("should render my component", () => {
    const wrapper = shallow(<JSX />);
    console.log(wrapper.debug())
    console.log(wrapper.find('h1').text())

    expect(wrapper.find('h1').text()).toContain('Hello JSX!')


  });
});
8

I got it working.

First problem: I was using a function…

import React from "react";

// Class Version
class App extends React.Component{
  render(){
    return      <h1>Hello JSX!</h1>

  }
} 
export default App;

I believe this is correct:

// The constant JSX should return an h1 element.

// assert(JSX.type === 'h1');
// The h1 tag should include the text Hello JSX!

// assert(Enzyme.shallow(JSX).contains('Hello JSX!'));


// MyComponent.test.js
import React from 'react';
import {shallow } from 'enzyme';
import JSX from './fccexercises/react01';
import {assert} from 'chai'



describe("H1 tag should include the text: Hello JSX!", () => {
  it("should render my component", () => {
    // const wrapper = shallow(<JSX />);
    // console.log(wrapper.debug())
    // expect(wrapper.find('h1'));
    // console.log(wrapper.find('h1').type())
    // expect(wrapper.find('h1').text()).toContain('Hello JSX!')
    
    const element = <h1>Hello JSX!</h1>;

    const wrapper2 = shallow(element);
    console.log(element.type)
    assert(element.type === 'h1');

    assert(wrapper2.contains('Hello JSX!'))
    assert(shallow(element).contains('Hello JSX!'))
  });
});
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.