How to test rc-field-form Field with Jest & Enzyme in react-native

See also questions close to this topic

• HeaderButton in React Native

  I created a drawerNavigator and now I'm trying to add an icon to the header. The issue is when I add my HeaderButton I get this error:

  Component exception

  In the navigationOptions I tried to use both HeaderButton and CustomHeaderButton but it doesn't work and I can't seem to figure out the issue.

  This is my code:

  HeaderButton.js

  import React from "react";
  import { HeaderButton } from "react-navigation-header-buttons";
  import { Ionicons } from "@expo/vector-icons";
  
  const CustomHeaderButton = (props) => {
    return (
      <HeaderButton
        {...props}
        IconComponent={Ionicons}
        iconSize={23}
        color="black"
      />
    );
  };
  
  export default CustomHeaderButton;
  
  

  WelcomeScreen.js

  import React from "react";
  import { View, Text, StyleSheet, ImageBackground, Image } from "react-native";
  import MainButton from "../components/MainButton";
  import Colors from "../constants/Colors";
  import { HeaderButtons, Item } from "react-navigation-header-buttons";
  import HeaderButton from "../components/HeaderButton";
  
  const WelcomeScreen = (props) => {
    return (
      <ImageBackground
        source={require("../assets/images/tsl.jpg")}
        style={styles.backgroundImage}
      >
        <Image
          source={require("../assets/images/slogan.jpg")}
          style={styles.logo}
        />
        <View style={styles.buttonContainer}>
          <MainButton
            onPress={() => {
              props.navigation.navigate({
                routeName: "UserLogin",
              });
            }}
          >
            User Login
          </MainButton>
          <MainButton
            onPress={() => {
              props.navigation.navigate({ routeName: "DriverLogin" });
            }}
          >
            Driver Login
          </MainButton>
          <View style={styles.newAccountContainer}>
            <Text style={styles.newAccountText}>Don't have an account?</Text>
          </View>
          <View style={styles.registerContainer}>
            <MainButton style={styles.registerButton}>Register now</MainButton>
          </View>
        </View>
      </ImageBackground>
    );
  };
  
  WelcomeScreen.navigationOptions = {
    headerLeft: (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item title="Menu" iconName="ios-menu" />
      </HeaderButtons>
    ),
  };
  
  

  Thank you!
• Couldn't start project on Android: The system cannot find the path specified

  I downloaded SDK into my D Drive so I have D:/AppData/Android/Sdk and it gave me the error of: Couldn't start project on Android: The system cannot find the path specified.

  The environment variables is set to the same path in D Drive
• React Native - Serial Video Player

  I am trying to create a video playlist , where videos are played in order , one after the other in a React Native app , how do I go about creating an app where one video is played after the other in a serialized fashion.
• How to use jest to mock a function just for some specified arguments, but uses its original logic for any other arguments?

  Say I have a function:

  function complexCompute(num: number): string {
     switch(num) {
        case 1: return '...something...';
        case 2: return '...something...';
        case 3: return '...something...';
        // more cases
  }
  

  It is used many times in the code I want to test, but I want to mock it like this:

  • when I pass the argument num is 1, complexCompute returns my mocked string my-mock-string1
  • when I pass any other argument, it uses its original logic

  I can't find a way to do it, since if I mocked the module:

  jest.mock('./complexCompute')
  

  The mocked complexCompute doesn't have original logic. I have to define the mock value for argument 1, and also rewrite the whole logic for other arguments.

  Is there any way to do it?
• How to Unit Test a Lambda Implemented with AWS SDK for Go V2

  Given the following simple lambda written in Go that just returns a table description...

  package main
  
  import (
      "context"
      "encoding/json"
      "fmt"
      "log"
      "net/http"
      "os"
      "strings"
  
      "github.com/aws/aws-lambda-go/events"
      "github.com/aws/aws-lambda-go/lambda"
      "github.com/aws/aws-sdk-go-v2/aws"
      "github.com/aws/aws-sdk-go-v2/config"
      "github.com/aws/aws-sdk-go-v2/service/dynamodb"
      "go.uber.org/zap"
  )
  
  var (
      dynamoDBTableName = aws.String(os.Getenv(EnvDynamoDBTableName))
  
      logger = func() *zap.Logger {
          l, err := zap.NewProduction()
          if err != nil {
              log.Printf("failed to create zap logger: %v", err)
          }
          return l
      }()
  )
  
  func handler(ctx context.Context, req events.APIGatewayProxyRequest) 
      (events.APIGatewayProxyResponse, error) {
  
      defer logger.Sync()
  
      resp := events.APIGatewayProxyResponse{}
  
      cfg, err := config.LoadDefaultConfig(ctx)
      if err != nil {
          logger.Error("failed to load AWS config", zap.Error(err))
          return resp, fmt.Errorf("failed to load AWS config: %w", err)
      }
  
      svc := dynamodb.NewFromConfig(cfg)
  
      // fake logic
      t, err := svc.DescribeTable(ctx, &dynamodb.DescribeTableInput{TableName: dynamoDBTableName})
      if err != nil {
          logger.Error("failed to describe table", zap.String("table-name", *dynamoDBTableName), zap.Error(err))
      }
      var sb strings.Builder
      enc := json.NewEncoder(&sb)
      err = enc.Encode(t.Table)
      if err != nil {
          logger.Error("failed to JSON encode response", zap.Error(err))
      }
      resp.Body = sb.String()
      resp.StatusCode = http.StatusOK
  
      return resp, nil
  }
  
  func main() {
     lambda.Start(handler)
  }
  

  ... how do I unit test it locally? With the old SDK it was possible to use dependency injection like this:

  type deps struct 
      svc dynamodbiface.DynamoDBAPI
      table string
  }
  
  func (d *deps) handler(ctx context.Context, req events.APIGatewayProxyRequest) 
      (events.APIGatewayProxyResponse, error) {
      
      ...
  }
  
  func main() {
     s := session.Must(session.NewSession())
     d := deps {
         svc: dynamodb.New(s),
         table: dynamoDBTableName,
     }
  
     lambda.Start(d.handler)
  }
  

  How do I test a lambda written with the new AWS SDK for Go V2 given that I need the context to load the config required by dynamodb.NewFromConfig?
• Unit testing log format and custom field in a Django Application

  Context

  I created the following logger for a Django 2.2 project (python 3.6)

  #project/settings.py
  LOGGING = {
      'version': 1,
      'disable_existing_loggers': False,
      'handlers': {
          'console': {
              'level': os.getenv('DJANGO_LOG_LEVEL', 'INFO'),
              'class': 'logging.StreamHandler',
              'formatter': 'verbose',
              'filters': ['app_version'],
          },
      },
      'filters': {
          'app_version': {
              '()': 'project.utils.AppVersionFilter'
          },
      },
      'formatters': {
          'verbose': {
              'format': '{"@timestamp":"%(asctime)s","@version":"%(app_version)s","level":"%(levelname)s","message":"%(message)s","logger_name":"%(module)s","thread":"%(thread)s"}',
              'style': '%',
          },
      },
      'loggers': {
          'django': {
              'handlers': ['console'],
              'level': os.getenv('DJANGO_LOG_LEVEL', 'INFO'),
              'propagate': True,
          },
      },
  }
  

  It works like a charm. While running runserver, I can see all my requests logged in a JSON-like syntax with the additional app_version field (using project.utils.AppVersionFilter)

  Problem

  The last assertion of this unit test fails: app_version is not defined (plus there is no sign of JSON-like syntax set by the formatter). I would like to understand why to fix it and make sure that the app's logging will remain stable.

  #app/tests.py
  class TestLoggerBehavior(TestCase):
      def test_log_views(self):
          with self.assertLogs(logger='django', level='INFO') as ctx:
              client = Client(HTTP_USER_AGENT='Mozilla/5.0')
              response = client.get('/api/etudes/non_existent_ressource/')
              self.assertEqual(ctx.records[0].levelname, 'WARNING')
              self.assertEqual(ctx.records[0].message, 'Not Found: /api/etudes/non_existent_ressource/')
              self.assertEqual(ctx.records[0].app_version, '1.0.0')
  

  My main guess is that I have not set logger properly in assertLogs(I found this part of the documentation a bit confusing). From the standpoint of ./app what is the logger defined in ./project/settings.py? I tried project.django, project.logging.django but without much success. Likewise, I tried to @mock it but did not get what I expected
• Testing vue 3 async setup

  I can't quite figure out how to test my async setup vue 3 component.

  <script>
  import { someRepository } from "@/repositories"
  import { onMounted, toRefs } from 'vue'
  export default {
      name: 'HelloWorld',
      props: {
          msg: String
      },
      async setup(props) {
          const { msg } = toRefs(props)
  
          console.log(await someRepository.get())
  
          return {
              msg
          }
      }
  }
  </script>
  

  Wrapping this component with a Suspense component works as expected. However when running tests:

  import { someRepository } from "@/repositories"
  import { mount } from '@vue/test-utils'
  import HelloWorld from './HelloWorld.vue'
  
  jest.mock("@/repositories", () => { 
      return {
          someRepository: { 
              get: jest.fn()
          }
      }
  })
  
  describe('HelloWorld.vue', () => {
      beforeEach(() => {
          someRepository.get.mockImplementation(() => Promise.resolve("asdasd"))
      });
  
      it('renders props.msg when passed', () => {
          const msg = 'new message'
  
          const wrapper = mount(HelloWorld, {
              props: { msg }
          })
  
  
          expect(wrapper.text()).toMatch(msg)
      })
  }
  

  This will throw an error TypeError: Cannot read property 'addEventListener' of null on the shallowMount or mount. I've also tried making them async but that also doesn't work throwing the same error.

  The only solution is using onMounted hook. But that's not how Suspense is supposed to be used. Any ideas? Or is this simply not yet supported?
• Jest ReferenceError: You are trying to `import` a file after the Jest environment has been torn down

  I am trying to test my APIs using jest.

  I am having this error show after each time I run the tests

   PASS  test/auth.test.js
    √ Create a new user (237 ms)
    √ SignIn with user (133 ms)
    √ Delete The user (144 ms)
  
  Test Suites: 1 passed, 1 total
  Tests:       3 passed, 3 total
  Snapshots:   0 total
  Time:        2.173 s, estimated 8 s
  Ran all test suites.
  ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.
  

  my test file

  const auth = require("../routes/auth");
  const fetch = require('node-fetch');
  fetch.Promise = require("bluebird");
  
  
  (async () => {
  
  
      beforeAll(done =>{
          jest.useFakeTimers();
          done();
      })
  
      afterAll(done => {
          done();
      })
  
      jest.setTimeout(10000)
  
      test("Create a new user", async () => {
          const status =  await fetch(URL + "/api/auth/signUp", {
              method:"POST",
              headers: {
                  'Content-Type': 'application/json;charset=utf-8'
              },
              body:JSON.stringify(SignUpReq)
          })
          .then(res => res.status)
          await expect(status).toBe(201);
      })
  
      test("SignIn with user", async () => {
          let status =  await fetch(URL + "/api/auth/signin", {
              method:"POST",
              headers: {
                  'Content-Type': 'application/json;charset=utf-8'
              },
              body:JSON.stringify(deleteUserReq)
          })
          .then(res => res.status)
          await expect(status).toBe(200);
      })
  
      test("Delete The user", async () => {
          const status =  await fetch(URL + "/api/auth/deleteUser", {
              method:"DELETE",
              headers: {
                  'Content-Type': 'application/json;charset=utf-8',
                  'Authorization': 'Bearer <token>'
              },
              body:JSON.stringify(deleteUserReq)
          })
          .then(res => res.status)
  
          await expect(status).toBe(200);
      })
  
      
  
  })()
  
  

  The APIs test the actual database, not a mock DB

  I tried

  mongoose.connection.close()

  jest.useFakeTimers();

  changing jest timeout

  adding done before and after all

  using await before each expect

  still, the error shows up

  my env:

  "node": "V12.19.0"
  "bcrypt": "^5.0.0",
  "bluebird": "^3.7.2",
  "cors": "^2.8.5",
  "express": "^4.17.1",
  "jsonwebtoken": "^8.5.1",
  "md5": "^2.3.0",
  "mongoose": "^5.11.8",
  "node-fetch": "^2.6.1",
  "jest": "^26.6.3"
  

  my DB is hosted on mongo atlas

  How can I remove this error message?
• Mock a private method returns NPE or No method found

  I'm trying to mimic the behaviour of a public class that includes private methods with PowerMockito.

  Here is what those methods look like.

  private ChannelSftp channelSftp = null;
  
  public List<RandomStuff> method throws Exception {
      if(condition1) {
          return methodToMock();  
      }
  }
  
  private List<RandomStuff> methodToMock() {
      String firstString = null;
      InputStream = null;
      try {
          firstString = getFirstString();
      } catch (IOException e) {
      }
  }
  
  private String getFirstString() throws Exception {
      String firstString = null;
      Vector vs = channelSftp.ls(path);
      for (Object v : vs) {
          ...
      } 
      return firstString;
  }
  

  In the test, I tried using PowerMockito with those lines

  PowerMockito.when(mock, "getFirstString").thenReturn(null);
  PowerMockito.when(mock, "methodToMock").thenReturn(null);
  
  assertNull(mock.method())
  

  I get NullPointerException at

  Vector vs = channelSftp.ls(path)
  

  I added

  PowerMockito.when(mock, "getChannelSftp").thenReturn(null);
  

  as a 1st line, and I get No method found with 'channelSftp'

  I think that I need to mock ls, and I don't know how. Any ressources? Ideas?
• How to test HTTP attach() with a faker uploaded file in Laravel

  I have a method on a controller that receive a file upload and then retransmits via HTTP Client to an external post API route. It works but I'm unable to test it properly: when I retrive to get the fake storage file (with Storage::get()) I obtain an empty string and so the attach() method on the HTTP call fails with this error: InvalidArgumentException: A 'contents' key is required

  This is my controller's method:

  use Illuminate\Support\Facades\Http;
  use Illuminate\Support\Facades\Storage;
  use App\Http\Requests\StoreRequest;
  
  public function store(StoreRequest $request) {
      $data = [
          'name' => $request->name,
          // ...
      ];
      
      $response = Http::withToken( $this->token );
  
      if ($request->hasFile('file')) {
          $file = date('Ymd') . '-file.' . $request->file->extension();
          $request->file->storeAs('files', $file);
  
          if (Storage::exists("files/$file")) {
              dump(Storage::get("files/$file")); // -> enter on if but empty string on test
              $response = $response->attach('file', Storage::get("files/$file"), $file);
          }
      }
  
      $response = $response->post($this->endpoint, $data);
  
      if ($response->successful()) {
          return redirect()->route('thankyou');
      }
  }
  

  and this is my test:

  use Illuminate\Http\UploadedFile;
  use Illuminate\Support\Facades\Http;
  use Illuminate\Support\Facades\Storage;
  
  /** @test */
  public function check_that_store_works()
  {
      Storage::fake();
      Http::fake();
  
      $data = [
          'name' => $this->faker->firstName,
          'cv' => UploadedFile::fake()->create('file.pdf'),
      ];
      $file = date('Ymd') . '-file.pdf';
  
      $this->post( route('files.store'), $data )
          ->assertRedirect( route('thankyou') );
  
      Storage::assertExists( "files/$file" );
  }
  
• Mocks are not returning values properly with mockitoextension.class (Junit5)

  So i have this code, where im trying to mock that atendees receive the notifications:

   @Mock
      Event event;
  
      @Mock
      Attendee attende;
  
      @InjectMocks
      EventNotificationServiceImpl eventNotificationService;
  
      @Test
      public void checkIfAttendesAreNotified() {
  
          event.addAttendee(attende);
  
          eventNotificationService.announce(event);
  
          System.out.println(attende.getNotifications());
  
          List<Notification> notifications = attende.getNotifications();
  
          for (Notification notification : notifications) {
  
              assertEquals("The next big event is coming!", notification.getMessage());
  
          }
      }
  

  however here i dont see that atendees receive any notifications.But when I put this code, i see attendes receive notifications:

    @Mock
      Event event;
  
      @Mock
      Attendee attende;
  
      @InjectMocks
      EventNotificationServiceImpl eventNotificationService;
  
      @Test
      public void checkIfAttendesAreNotified() {
          attende = new Attendee(1L,"sara", "sara@example.com");
          event = new Event();
          event.addAttendee(attende);
  
          eventNotificationService.announce(event);
  
          System.out.println(attende.getNotifications());
  
          List<Notification> notifications = attende.getNotifications();
  
          for (Notification notification : notifications) {
  
              assertEquals("The next big event is coming!", notification.getMessage());
  
          }
      }
  

  Id like to know why mocks are not being inicitialized. Id like to not have to create the event and attendees objects in the tests since this bring me problems cause when i try to verify, attendees and events are not recognized as mocks. If someone can help me Id be very thankful! :)))
• testing form validation using Enzyme

  I'm trying to test if the error shows up on the screen when user submit the form with empty inputs!

  I did this test and everything looks good to me ,but it says that length is 0 which means it didn't show up, where is my mistake ?

  import React, { useState } from 'react';
  import { login } from '../../../services/account-service';
  import validate from '../../../utility/login-validate';
  import { Button, Error, Form, Input, Label, NavLink, Sign, SignBtn } from './signin-style';
  
  /**
   * Component to log in the website if you have valid information, and display errors if the information is invalid.
   */
  function Signin() {
    const [email, setemail] = useState('');
    const [errors, setErrors] = useState(null);
    const [password, setPassword] = useState('');
  
    /**
     *this methode called when the user presses the submit button, first it will check if there is errors, if not it will submit the form!
     *
     * @param {React.SyntheticEvent} event click on submit button event!
     */
    const handleSubmit = async (event) => {
      event.preventDefault();
  
      /**
       * Function that check if the user inserted wrong information and put it on `error` variable!, then it will update the 'errors' state!
       */
      const error = validate(email, password);
      setErrors(error);
  
      await login(email, password);
    };
  
    /**
     * Method that handle the change on { email input } by taking the input value and setting it on 'email' state!
     *
     * @param {React.SyntheticEvent} event when user type in email input!
     */
    const handleemailChange = (event) => {
      const user = event.currentTarget.value;
      setemail(user);
    };
  
    /**
     *  Method that handle the change on { password input } by taking the input value and setting it on 'password' state!
     *
     * @param {React.SyntheticEvent} event  When user type in password input
     */
    const handlePasswordChange = (event) => {
      const pass = event.currentTarget.value;
      setPassword(pass);
    };
  
    return (
      <Sign>
        <h1>Sign In</h1>
        <NavLink to="/login">Need an account?</NavLink>
        {errors ? <Error id="error">* Invalid email or password!</Error> : null}
        <Form>
          <div>
            <Label htmlFor="email">
              <Input
                id="email"
                onChange={handleemailChange}
                placeholder="Email"
                type="text"
                value={email}
              />
            </Label>
          </div>
          <div>
            <Label htmlFor="password">
              <Input
                id="password"
                onChange={handlePasswordChange}
                placeholder="Password"
                type="password"
                value={password}
              />
            </Label>
          </div>
          <SignBtn>
            <Button type="submit" onClick={handleSubmit}>
              Sign in
            </Button>
          </SignBtn>
        </Form>
      </Sign>
    );
  }
  
  export default Signin;
  

  my test :

  import { shallow } from 'enzyme';
  import React from 'react';
  import '../../../setup-tests';
  import Signin from './Signin';
  
  describe('Signin component', () => {
    let wrapper;
    beforeEach(() => {
      wrapper = shallow(<Signin />);
    });
  
    it('should display error on the screen on click', () => {
      const emailInput = wrapper.find('#email');
      const passwordInput = wrapper.find('#password');
  
      passwordInput.simulate('change', { currentTarget: { value: '' } });
      emailInput.simulate('change', { currentTarget: { value: '' } });
  
      const submitButton = wrapper.find('[type="submit"]');
      submitButton.simulate('click');
  
      expect(wrapper.find('#error')).toHaveLength(1);
    });
  });
  

  test return this when I run it :

  Expected length: 1, Received length: 0, Received object: {}
• callback function for `scroll` event doesn't get covered by enzyme test. (React.js)

  This is my part of React component

  ...
    componentDidMount(): void {
      window.addEventListener('scroll', this.handleScroll, true);
    }
  
    handleScroll() {
       const hello = 'assign';
       this.setState({blah: 'blah'}); /// whole function is not covered.
    }
  ...
  

  enzyme test

  describe('when is scrolled', () => {
    beforeEach(() => {
      wrapper.simulate('scroll', true); <-- simulate scroll
    });
  
    test('should match snapshot', () => {
      expect(wrapper).toMatchSnapshot(); <<< should cover `handleScroll`
    })
  });
  

  This should cover handleScroll but enzyme test doesn't cover the whole function (for code coverage)
• Jest tests keep failing for React component that renders various HTML elements based on type by using switch statement

  I have a React Component that takes an array and iterates over each node, styling and rendering HTML elements based on the types found within the array.

  I have everything running properly and now I'm trying to write a test using Jest to check that:

  1. The component doesn't render anything when it receives an empty array
  2. The component renders the appropriate HTML elements based on type when it receives a populated array

  I'm relatively new to Jest and testing and I'm not sure how to write the tests to check that the appropriate elements have rendered. Also my null check test keeps failing with the following error message:

   FAIL  src/components/RenderTextComponent.spec.js
    ● <RenderTextComponent /> › renders null for empty sections array
  
      expect(received).toEqual(expected)
  
      Expected value to equal:
        null
      Received:
        <RenderTextComponent />
  
      Difference:
  
        Comparing two different types of values. Expected null but received object.
  
        27 |
        28 |   it('renders null for empty sections array', () => {
      > 29 |     expect(<RenderTextComponent {...emptySections} />).toEqual(null)
           |                                                  ^
        30 |   })
        31 |
        32 |   it('renders', () => {
  
        at Object.it (src/components/RenderTextComponent.spec.js:29:50)
  

  This is my testing file:

  import React from 'react';
  import { shallow } from 'enzyme'
  import RenderTextComponent from './RenderTextComponent'
  
  
  describe('<RenderTextComponent />', () => {
    let wrapper;
  
    const sections = {}
  
    const populatedSections = [
      {
      type: "subtitle",
      text: ["This is a really cool subtitle filled with words of wonder"]
      },
      {
        type: "body",
        text: ["This is an even cooler sentence that shows up as a paragraph.", "And this is a second sentence that shows up as a second paragraph."]
    }
  ]
  
    const emptySections = []
  
    beforeEach(() => {
      wrapper = shallow(<RenderTextComponent {...sections} />);
    });
  
    it('renders null for empty sections array', () => {
      expect(<RenderTextComponent {...emptySections} />).toEqual(null)
    })
  
    it('renders', () => {
      expect(<RenderTextComponent {...populatedSections} />).toEqual(expect.anything())
    })
  
  })
  

  And this is my original component that I'm testing:

  import React from "react";
  import styled from "styled-components";
  
  function renderElements(sections) {
    const elements = [];
  
    if (!sections) return null;
  
    sections.map((section) => {
      switch (section.type) {
        case "title":
          return elements.push(
            section.text.map((string) => <Title>{string}</Title>)
          );
        case "subtitle":
          return elements.push(
            section.text.map((string) => <Subtitle>{string}</Subtitle>)
          );
        case "body":
          return elements.push(
            section.text.map((string) => <Body>{string}</Body>)
          );
        default:
          return null;
      }
    });
    return elements;
  }
  
  const RenderTextComponent = ({ sections }) => {
    return <>{renderElements(sections)}</>;
  };
  
  export default RenderTextComponent;
  
  const Title = styled.h1`
    font-size: 28px;
  `;
  
  const Subtitle = styled.h4`
    font-size: 24px;
  `;
  
  const Body = styled.p`
    font-size: 18px;
  `