Categories
JavaScript Answers

How to fix the Jest ‘No Tests found’ error?

Sometimes, we want to fix the Jest ‘No Tests found’ error.

In this article, we’ll look at to fix the Jest ‘No Tests found’ error.

How to fix the Jest ‘No Tests found’ error?

To fix the Jest ‘No Tests found’ error, we should make sure the testMatch setting in jest.config.js is set to an array of paths with the test files.

For instance, we write

const jestConfig = {
  verbose: true,
  testURL: "http://localhost/",
  'transform': {
    '^.+\\.jsx?$': 'babel-jest',
  },
  testMatch: ['**/__tests__/*.js?(x)'],
}

module.exports = jestConfig

to set testMatch to an array with '**/__tests__/*.js?(x)' to make sure that Jest runs the test files in the __tests__ folder with extension .js or .jsx.

Conclusion

To fix the Jest ‘No Tests found’ error, we should make sure the testMatch setting in jest.config.js is set to an array of paths with the test files.

Categories
JavaScript Answers

How to test for a rejected promise using Jest?

Sometimes, we want to test for a rejected promise using Jest.

In this article, we’ll look at how to test for a rejected promise using Jest.

How to test for a rejected promise using Jest?

To test for a rejected promise using Jest, we can use the rejects.toEqual method.

For instance, we write

it('rejects...', () => {
  const Container = createUserContainer(CreateUser);
  const wrapper = shallow(<Container />);
  expect(wrapper.instance().handleFormSubmit()).rejects.toEqual('error');
});

to call rejects.toEqual with the promise rejection message we want to check for.

It assumes that handleFormSubmit returns a promise.

Conclusion

To test for a rejected promise using Jest, we can use the rejects.toEqual method.

Categories
JavaScript Answers

How to test background image styles with React testing library?

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.

Categories
JavaScript Answers

How to fix “Unexpected token ‘import'” error while running Jest tests?

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.

Categories
JavaScript Answers

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

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.