Category: JavaScript Answers

Sometimes, we want to test background image styles with React testing library.

In this article, we’ll look at how to test background image styles with React testing library.

How to test background image styles with React testing library?

To test background image styles with React testing library, we can use the toHaveStyle method.

For instance, we can use it by writing

expect(getByTestId('background')).toHaveStyle(`background-image: url(${props.image})`)

We get the component we want to test by its test ID with getByTestId('background').

Then we call toHaveStyle with the style string we want to check.

Conclusion

To test background image styles with React testing library, we can use the toHaveStyle method.

Sometimes, we want to fix "Unexpected token ‘import’" error while running Jest tests.

In this article, we’ll look at how to fix "Unexpected token ‘import’" error while running Jest tests.

How to fix "Unexpected token ‘import’" error while running Jest tests?

To fix "Unexpected token ‘import’" error while running Jest tests, we can set transformIgnorePatterns to include the modules that raised this error so that Jest can parse the file.

For instance, we write

transformIgnorePatterns: ["/node_modules/(?!vue-awesome)"],

to include the vue-awesome Node module with the Jest transformation.

This would transform any ES6 import to something Jest can parse.

Conclusion

To fix "Unexpected token ‘import’" error while running Jest tests, we can set transformIgnorePatterns to include the modules that raised this error so that Jest can parse the file.

Sometimes, we want to fix the issue where Jest finds tests but doesn’t collect coverage.

In this article, we’ll look at how to fix the issue where Jest finds tests but doesn’t collect coverage.

How to fix the issue where Jest finds tests but doesn’t collect coverage?

To fix the issue where Jest finds tests but doesn’t collect coverage, we can add the --watchAll option when we runs tests.

For instance, we run

react-scripts test --coverage --watchAll.

to calculate code coverage from all tests.

We can also change the config to include more files in the code coverage calculation with

"jest": {
  "collectCoverageFrom": [
    "src/**/*.{js,jsx,ts,tsx}",
    "!<rootDir>/node_modules/"
  ],
  "coverageThreshold": {
    "global": {
      "lines": 90,
      "statements": 90
    }
  }
}

in the Jest config.

We set collectCoverageFrom to calculate coverage from any js, jsx, ts, and tsx file in the src folder and its children.

Conclusion

To fix the issue where Jest finds tests but doesn’t collect coverage, we can add the --watchAll option when we runs tests.

Sometimes, we want to mock import of JSON file with Jest.

In this article, we’ll look at how to mock import of JSON file with Jest.

How to mock import of JSON file with Jest?

To mock import of JSON file with Jest, we can use jest.mock.

For instance, we write

jest.mock('path/to/setting.json', () => ({
  foo: 'bar'
}), {
  virtual: true
})

to call jest.mock to mock the path/to/setting.json JSON file.

We pass in a function that returns the JSON object as the 2nd argument and an object with the virtual property set to true to let us mock the JSON file.

virtual set to true lets us mock modules that don’t exist anywhere in the system.

Since a JSON file isn’t a JavaScript module, we need this option to mock it.

Conclusion

To mock import of JSON file with Jest, we can use jest.mock.

Sometimes, we want to check that an argument to a mocked function is a function with Jest.

In this article, we’ll look at how to check that an argument to a mocked function is a function with Jest.

How to check that an argument to a mocked function is a function with Jest?

To check that an argument to a mocked function is a function with Jest, we can use the toBeCalledWith method.

For instance, we write

expect(AP.require).toBeCalledWith('messages', expect.any(Function))

to check that AP.require is called with 'messages' and a function respectively.

expect.any(Function) checks that the argument of AP.require is a function.

Conclusion

To check that an argument to a mocked function is a function with Jest, we can use the toBeCalledWith method.